1) O documento apresenta um cronograma de estudos em HTML e CSS para um desenvolvedor front-end.
2) Inclui explicações sobre as principais tags e atributos em HTML e CSS, além de tópicos como pré-processadores, semântica e HTML5.
3) Fornece detalhes sobre a estrutura e significado semântico de páginas web.
7. Matheus S. Thomaz
Front-end Developer
/HTML
1. <!DOCTYPE html>
Determina o tipo de documento.
8. Matheus S. Thomaz
Front-end Developer
/HTML
1. <html lang="pt-br">
2. </html>
Delimita o html.
9. Matheus S. Thomaz
Front-end Developer
/HTML
1. <head>
2. <meta charset="utf-8">
3. <title>Título da página</title>
4. </head>
Valores que o navegador usa para
renderizar a página.
10. Matheus S. Thomaz
Front-end Developer
/HTML
1. <body>
2. // conteudo
3. </body>
Onde todo conteúdo da tela deve
estar.
32. Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ background: cor || url || repeat ||
posição }
Especifica a cor || imagem || posição da imagem ||
repetição da imagem do plano de fundo do documento.
cor: #111, rgb(255,255,255), rgba(255,255,255,0.5)
url: url(../img/image.png)
repeat: repeat-x, repeat-y, no-repeat
posição: 10px -50px
33. Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ border: largura || estilo || color }
Define a largura || estilo || cor das bordas de um
objeto.
largura: 2px
estilo: dotted, solid, dashed…
color: #111, rgb(255,255,255), rgba(255,255,255,0.5)
34. Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ color: color }
Define a cor do texto do elemento.
color: #111, rgb(255,255,255), rgba(255,255,255,0.5)
35. Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ display: none }
Determina se um elemento estará visível e reserva um
espaço para o mesmo.
display: none, block, inline, inline-block...
36. Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ position: absolute}
Determina como o elemento está posicionado na
página.
position: absolute, relative, static, fixed, inherit
41. Conversões léxicas é praticamente o
mesmo que pegar um texto em
português, escrito de forma informal,
(por exemplo, com gírias e sem uma
pontuação correta) e transforma-lo em
um texto escrito de forma formal.
42. Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
Resumindo
Pego isso:
div { background: (@corLorem + #222) * 1.5; }
E transformo nisso:
div { background: #4d4d4d; }
43. Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
Definindo:
Uma linguagem que, após compilada, gera CSS.
44. Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
CSS
Desorganizado.
Não tem padrão.
Folhas se estilo muito extensas.
Repetitivo.
Uso de prefixos.
Pré-processador
Organização
Imports
Aninhamento (nested)
Variáveis
Funções
Mixins
45. Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
LESS
SASS
Stylus