Roteiro de aulas, HTML & CSS nível iniciante

Aula 1: Introdução ao HTML
Objetivo: Compreender a estrutura básica do HTML e criar uma página simples.

• O que é HTML e sua importância na criação de páginas web.
• Estrutura básica de uma página HTML (doctype, html, head, title, body).
• Parágrafos, cabeçalhos e quebras de linha.
• Tags de formatação básica: negrito, itálico, sublinhado.

Atividade prática:
Criar uma página HTML simples que contenha um título, um parágrafo com algumas frases e um cabeçalho.

Aula 2: Elementos e Links
Objetivo: Aprender a usar diferentes elementos HTML e criar links para outras páginas.

• Listas ordenadas e não ordenadas.
• Imagens e seus atributos.
• Links internos (âncoras) e links externos.
• Introdução às classes e IDs.

Atividade prática:
Ampliar a página criada anteriormente adicionando uma lista, uma imagem e alguns links (internos ou externos).

Aula 3: Introdução ao CSS
Objetivo: Entender o que é CSS e como usá-lo para estilizar páginas HTML.

• O que é CSS e sua importância no design de páginas web.
• Inline vs. Estilos internos vs. Estilos externos.
• Seletores CSS básicos.
• Propriedades de estilo fundamentais: cor, fonte, tamanho, margens e preenchimento.

Atividade prática:
Estilizar a página HTML criada anteriormente usando estilos internos ou externos para alterar cores, fontes e adicionar margens e preenchimentos.

Aula 4: Layout e Posicionamento
Objetivo: Aprender a criar layouts simples usando CSS.

• Box model: margem, borda, preenchimento e conteúdo.
• Posicionamento de elementos: relative, absolute e float.
• Criação de layouts em colunas.

Atividade prática:
Criar uma página que contenha uma estrutura de cabeçalho, conteúdo principal e rodapé usando o posicionamento de elementos aprendidos.

Aula 5: Responsividade e Media Queries
Objetivo: Entender a importância da responsividade em páginas web e como aplicar media queries.

• O que é design responsivo e sua relevância nos dias de hoje.
• Meta tag viewport.
• Uso de media queries para diferentes tamanhos de tela.
• Introdução a grids e flexbox para layouts flexíveis.

Atividade prática:
Tornar a página criada anteriormente responsiva usando media queries para ajustar o layout em diferentes tamanhos de tela.

Lembre-se de que este é um roteiro básico para iniciantes, e há muito mais para aprender em HTML e CSS à medida que você avança. Estimule os alunos a praticar continuamente e a buscar recursos adicionais, como documentação oficial e tutoriais online, para aprofundar seus conhecimentos.