Módulo 15: Projeto Prático: O Hero de Elite

2. Resumo da Aula Anterior

No Módulo 14, aprendemos a organizar o nosso código com a metodologia BEM. Agora, vamos juntar tudo: variáveis, Flexbox, Grid, Animações e BEM num único projeto prático de alto nível.

3. O Que Vais Fazer Hoje

✅ Construir uma secção "Hero" (impacto inicial do site).
✅ Aplicar o sistema de Variáveis CSS para cores.
✅ Criar um layout responsivo que muda de Grid para Flex.
✅ Adicionar efeitos de hover avançados com Pseudo-elementos.

4. Teoria: Por que o Hero importa?

Conceito: A secção "Hero" é a primeira coisa que um utilizador vê. Se ela não for apelativa e profissional em menos de 3 segundos, o utilizador fecha o site. Um Hero de elite deve ter: Texto claro, Contraste alto e um Botão de Ação (CTA) óbvio.

🏆 Analogia: A Montra da Loja

Imagina uma loja de luxo na Avenida da Liberdade:

O Vidro (Contentor Hero): Deve estar limpo e mostrar tudo o que é importante.
O Manequim (Título): É a peça central que chama a atenção.
O Preço/Sinalética (CTA): Diz ao cliente exatamente o que fazer a seguir (Entra agora!).

5. Estrutura do Projeto

HTML Recomendado (BEM)
                    <section class="hero">
  <div class="hero__content">
    <h1 class="hero__title">Cria Sites Incríveis</h1>
    <p class="hero__subtitle">Domina o CSS como um profissional.</p>
    <button class="hero__cta">Começar Agora</button>
  </div>
</section>
                

CSS Recomendado (Moderno)
                    :root {
  --hero-bg: #0f172a;
  --accent: #38bdf8;
}

.hero {
  height: 80vh;
  background-color: var(--hero-bg);
  display: grid;
  place-items: center; /* Centramento instantâneo! */
  text-align: center;
  color: white;
}

.hero__cta {
  padding: 15px 30px;
  background-color: var(--accent);
  border: none;
  transition: transform 0.2s;
}

.hero__cta:hover {
  transform: translateY(-5px);
}
                

6. Agora é a Tua Vez de Criar!

O teu objetivo é criar o Hero mais bonito possível:

Usa as variáveis do :root para as cores.
Adiciona uma imagem de fundo (background-image) com um overlay escuro (usa linear-gradient).
Usa aspect-ratio no contentor da imagem se quiseres um formato específico.
Faz com que o título hero__title tenha uma animação suave de entrada.
Garante que no telemóvel (Media Query) o texto diminui de tamanho para não quebrar o design.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo: O que um Hero precisa?

📌 Hierarquia Visual: O título deve ser o maior elemento.
📌 Contraste: O texto deve ser sempre fácil de ler.
📌 Interatividade: O botão deve reagir ao toque do utilizador.
📌 Mobile-first: Testa sempre como fica no telemóvel primeiro!

9. Conclusão do Batismo de Fogo

Se chegaste aqui e conseguiste construir o teu Hero, parabéns! Acabas de passar da fase de "aprender propriedades" para a fase de "construir produtos". Estás a 5 módulos de terminar o curso de CSS!

O Próximo Passo

Nos próximos módulos vamos focar-nos em Filtros, Transformações 3D e o Grande Projeto Final.

Aprende Web: CSS

Módulo 15: O Hero de Elite (Projeto)