Módulo 20: Projeto Final de Curso
2. Resumo da Tua Jornada
De simples seletores a layouts 3D complexos, percorreste um caminho incrível. No Módulo 19, aprendeste a otimizar o teu código. Agora, chegou o momento do "Exame Final": construir uma Landing Page completa, funcional e visualmente impressionante.
3. O Teu Desafio Final
- ✅ Criar uma Landing Page completa para uma marca fictícia (ex: "Zeta Tech").
- ✅ Implementar um Header responsivo com navegação.
- ✅ Construir um Hero com Glassmorphism.
- ✅ Usar CSS Grid para a secção de serviços/produtos.
- ✅ Garantir que o site corre a 100/100 no Lighthouse.
4. Estruturar antes de Estilizar
Conceito: Um projeto deste tamanho não se começa pela cor do botão. Começa-se pelo HTML sem estilos. Quando a estrutura está sólida, aplicamos as Variáveis CSS globais e depois as regras BEM secção por secção.
🏗️ Analogia: Construir um Arranha-céus
Imagina que és um arquiteto:
- O Licenciamento (Variáveis): Primeiro decides as regras do jogo (quais as cores e fontes permitidas).
- A Estrutura de Betão (HTML): Levantas os pilares e o esqueleto. O prédio ainda não é bonito, mas é seguro.
- Os Vidros e Decoração (CSS): Finalmente, colocas o Glassmorphism, as animações e os filtros. É aqui que o prédio se torna um ícone na cidade!
5. Requisitos Obrigatórios
Checklist de Qualidade
- ✔️ **CSS Puro**: Nada de bibliotecas externas (Vanilla CSS).
- ✔️ **Metodologia BEM**: Nomes de classes organizados.
- ✔️ **Responsividade**: Deve ficar perfeito no iPhone e no Desktop.
- ✔️ **Acessibilidade**: Contrastes de cores aprovados.
- ✔️ **Dose de "Wow"**: Pelo menos um efeito 3D ou Animação complexa.
6. Agora é Contigo Developer!
Segue este roteiro para não te perderes:
- Define o
:rootcom a tua paleta de cores. - Cria o Header com
display: flexejustify-content: space-between. - O Hero deve ocupar quase todo o ecrã (
min-height: 80vh). - Secção de Características usando
display: gridcom 3 colunas. - Footer com links sociais.
- Usa
@keyframespara fazer os elementos "saltarem" quando o site carrega.
7. Prova de Fogo Final
8. Parabéns, Mestre do CSS!
Completaste os 20 módulos do curso de CSS. Agora tens o superpoder de transformar qualquer ideia num interface visual. Mas lembra-te: a web é dinâmica.
- 📌 Próximo Passo Sugerido: **Curso de JavaScript (O Cérebro do Site)**.
- 📌 Sem JS, o teu site é apenas uma estátua bonita. Com JS, ele ganha inteligência.
- 📌 Continua a praticar e a ler a documentação da MDN.
9. O Certificado do Esforço
O Desafio Bónus
Consegues fazer o teu site mudar de tema (Light/Dark) usando apenas CSS e Variáveis, sem JavaScript? (Dica: Usa um checkbox escondidinho e o seletor :checked).