Trilha de estudos html5 css3

Prévia do material em texto

Trilha de Estudos HTML5 + CSS3
 🔹Módulo 1 – Fundamentos
1. O que é HTML5 e sua função na web
2. Estrutura básica de um documento HTML (, , 
, )
3. Principais tags de conteúdo:
• Títulos ( a )
• Parágrafos ()
• Links ()
• Imagens ()
• Listas (, , )
4. Introdução ao CSS3:
• Sintaxe e seletores básicos
• Cores, fontes e tamanhos
• Diferença entre id e class
Projeto prático: Criar uma página de perfil simples com texto, imagem e links.
 🔹Módulo 2 – Estruturação e Semântica
1. Tags semânticas do HTML5:
• , , , , , , 
2. Atributos globais (alt, title, lang, data-*)
3. Tabelas (, , , )
4. Formulários básicos (, , , , )
Projeto prático: Criar um blog com cabeçalho, menu, artigos e rodapé.
 🔹Módulo 3 – Estilização Avançada
1. Box model (margin, border, padding, content)
2. Display (block, inline, inline-block)
3. Cores e gradientes
4. Fontes personalizadas e Google Fonts
5. Pseudo-classes e pseudo-elementos (:hover, :first-child, ::before, 
::after)
6. Posicionamento (relative, absolute, fixed, sticky)
Projeto prático: Landing page estilizada com cabeçalho fixo e efeitos em botões.
 🔹Módulo 4 – Layouts Modernos
1. Flexbox:
• display: flex
• Alinhamentos (justify-content, align-items, align-content)
• Ordenação (order) e tamanhos (flex-grow, flex-shrink)
2. CSS Grid:
• Criação de linhas e colunas
• grid-template-rows, grid-template-columns
• gap, grid-area
3. Media Queries e Design Responsivo
4. Unidades relativas (%, em, rem, vh, vw)
Projeto prático: Criar um portfólio responsivo usando Flexbox + Grid.
 🔹Módulo 5 – Recursos Extras
1. Animações e transições (transition, transform, animation)
2. CSS Variables (--cor-principal)
3. Trabalhando com ícones (FontAwesome, SVGs)
4. Boas práticas de acessibilidade (atributo alt, contraste de cores, navegação 
por teclado)
5. Estruturação de pastas e organização de código
Projeto prático: Criar uma landing page animada para um produto.
 🔹Módulo 6 – Projeto Final
• Construir um site completo e responsivo (ex: site pessoal, loja fictícia ou blog).
• Utilizar HTML5 semântico + CSS3 (Flexbox, Grid, animações).
• Publicar no GitHub Pages ou Netlify para colocar no ar.
	Trilha de Estudos HTML5 + CSS3
	🔹 Módulo 1 – Fundamentos
	🔹 Módulo 2 – Estruturação e Semântica
	🔹 Módulo 3 – Estilização Avançada
	🔹 Módulo 4 – Layouts Modernos
	🔹 Módulo 5 – Recursos Extras
	🔹 Módulo 6 – Projeto Final