-
Tópicos
- Estrutura base: html, head, body
- Títulos, parágrafos e listas
- Links, imagens e navegação básica
- Tags semânticas: header, nav, main, section, article, footer
- Atributos comuns: id, class, href, src, alt
-
Tópicos
- Seletores por tag, classe e id
- Cores, fontes e espaçamento
- Box model: margin, padding, border, content
- Display: block, inline, inline-block
- Organização básica de estilos (reset, arquivos separados)
-
Tópicos
- Conceitos de eixo principal e eixo cruzado no Flexbox
- Alinhamento e distribuição de elementos (justify-content, align-items)
- Criação de grids com linhas e colunas
- Uso de gap, fr e repeat em Grid
- Combinar Flexbox e Grid em um mesmo layout
-
Tópicos
- Unidades relativas: %, em, rem, vw, vh
- Media queries para diferentes breakpoints
- Layout mobile-first vs. desktop-first
- Navegação e botões em telas pequenas
- Testar responsividade em diferentes dispositivos
-
Tópicos
- Definir o objetivo da página (ex: portfólio, produto, evento)
- Criar a estrutura HTML semântica da página
- Aplicar estilos globais e tipografia consistente
- Construir o layout responsivo com Flexbox e Grid
- Testar em diferentes tamanhos de tela e ajustar detalhes finos
Como usar esta trilha
Esta página não é um curso completo. Ela só organiza, em ordem, temas que fazem sentido estudar
se você quer se aprofundar nesse assunto.
- Use a sequência como um mapa de referência, não como uma obrigação rígida.
- Procure conteúdos (vídeos, artigos, livros, documentações) para cada tópico listado.
- Adapte, pule ou reordene módulos conforme sua experiência e contexto.