Download - Front-end treinamento html/css
![Page 1: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/1.jpg)
Padrões webna globo.com
com o fein
![Page 2: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/2.jpg)
Por que?
![Page 3: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/3.jpg)
Doctype.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
![Page 4: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/4.jpg)
• boxmodel• margin: auto e width: auto;• img !important
• over!ow: visible; !important
• width: value; em elementos inline• <input />
Doctype.
![Page 5: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/5.jpg)
Progressive enhacement &
graceful degradation
![Page 6: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/6.jpg)
has layout
![Page 7: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/7.jpg)
• Estrutura: html, head, title, script, link, body• Headings• Pouco usadas: em, strong, abbr, cite, address
htmelê
![Page 8: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/8.jpg)
• inline X block• listas• tabelas• formulários
htmelê
![Page 9: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/9.jpg)
• link vs @import• sintaxe• unidades de medida• position• !oat• over!ow
CSS... let’s see
![Page 10: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/10.jpg)
• link vs @import• tipos de midia• sintaxe• unidades de medida• position• !oat• over!ow
CSS... let’s see
![Page 11: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/11.jpg)
• [att^=val] - pre"x• [att*=val] - substring• [att$=val] - suffix• E > F {}• E + F {}• E ~ F {}
Seletores no cda.
![Page 12: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/12.jpg)
• *• .class.class• [att^=val] - pre"x• [att*=val] - substring• [att$=val] - suffix• E > F {}• E + F {}• E ~ F {}
Seletores no cda e cma.
![Page 13: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/13.jpg)
• element:!rst-child• element:hover
Pseudo-classes no cda.
![Page 14: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/14.jpg)
• element:!rst-child• element:hover• element:active• element:focus
Pseudo-classes no cma.
![Page 15: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/15.jpg)
• no cda chora =/• :after• :before
Pseudo-elementos no cma.
![Page 16: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/16.jpg)
• !important• hacks• css expressions• seletor *• mais de 3/4 niveis de seleção
Feio, o que eu não posso fazer?
![Page 17: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/17.jpg)
• chamadas para estilos sempre no topo• não usar camel case (usar - ou _)• semantica (evitar: siglas; nomes de elementos
HTML etc)• usar pre!xos, su!xos• não usar números, caracteres especias• evitar nomes muito grandes
Feio, o que eu devo fazer?
![Page 18: Front-end treinamento html/css](https://reader034.vdocuments.site/reader034/viewer/2022052117/555eac4ad8b42a902e8b50c3/html5/thumbnails/18.jpg)
• sempre em Portugues (CDA)• ordem alfabética;• quebra de linha nas propriedades;• reuso de prop. entre seletores;• arquivos por componente;• a ordem é importante;
Feio, o que eu devo fazer?