Módulo 04 3 semanas

04 - CSS e Layout

Depois de estruturar páginas com HTML, chega o momento de torná-las legíveis, bonitas e organizadas. CSS é a linguagem que cuida da apresentação visual.

Objetivos do módulo

• Entender como o CSS funciona.
• Estilizar elementos HTML com consciência.
• Aprender box model, tipografia, cores e espaçamento.
• Criar layouts simples e responsivos.

Vídeos principais

• Curso HTML5 e CSS3: módulo 2 de 5 [40 Horas] - Curso em Vídeo

Leitura complementar

• CSS - MDN
• CSS básico - MDN
• Como funciona o CSS - MDN
• Learn CSS - web.dev

Conceitos essenciais

Seletor

Define a quais elementos a regra CSS será aplicada.

Propriedade e valor

Exemplo:

h1 {
  color: blue;
}

color é a propriedade. blue é o valor.

Box model

Todo elemento visível na página se comporta como uma caixa com:

• conteúdo
• preenchimento interno
• borda
• margem

Cascata

O CSS decide qual regra vence quando duas regras afetam o mesmo elemento.

O que praticar

• cores e contraste
• fontes e hierarquia visual
• margens e espaçamentos
• bordas e sombras
• classes e IDs
• links e estados de interação
• display, flexbox e layout em colunas
• adaptação para celular

Exercícios práticos

1. Estilize a página do módulo anterior.
2. Defina cores para fundo, texto e destaques.
3. Escolha uma fonte para títulos e outra para corpo do texto.
4. Crie uma classe para cartões de conteúdo.
5. Monte um menu horizontal simples.
6. Crie uma seção com duas colunas usando flexbox.
7. Ajuste espaçamentos internos e externos de uma página.
8. Faça um botão mudar de aparência ao passar o mouse.
9. Adapte a página para funcionar melhor em telas pequenas.
10. Compare visualmente a versão antes e depois do CSS.

Projeto do módulo

Projeto: Landing Page de Produto Fictício

Escolha um produto, serviço ou ideia e crie uma página com:

• cabeçalho
• título forte
• descrição curta
• benefícios em lista ou cartões
• botão de chamada para ação
• seção com perguntas frequentes ou depoimentos
• rodapé

Requisitos mínimos:

• layout organizado
• paleta de cores coerente
• bom contraste
• uso de classes reutilizáveis
• comportamento aceitável em celular

Checklist de conclusão

• Sei conectar um arquivo CSS ao HTML.
• Consigo estilizar texto, cores, bordas e espaçamentos.
• Entendo o box model.
• Consigo criar um layout simples com flexbox.
• Consigo melhorar a página para telas menores.