Construção por Blocos e Reuso

A Arte de Escalar seu Território Digital

Aula 03 • Rede Daora

A Nossa Base

Estrutura (HTML)
Damos nome e hierarquia. Sem o HTML, não há significado.
Estilo (CSS)
Damos volume e beleza. Sem o CSS, o site é apenas texto cru.

O LEGO da Web

Sites profissionais não são escritos linha por linha do início ao fim. Eles são **compostos** por blocos funcionais:

☰

Navegação

⭐

Destaque

🖼️

Galeria

✉️

Rodapé

Reuso: O Princípio DRY

Na tecnologia, usamos o conceito DRY (Don't Repeat Yourself - Não se repita):

Programar é buscar uma montagem inteligente.

O Nosso Laboratório (IDEs)

Para construir por blocos, precisamos de ferramentas que nos ajudem a organizar o código:

No Polo (Windows)

Usaremos o VS Code. É o padrão mundial: rápido, potente e cheio de recursos para facilitar a escrita.

Opções Online (Nuvem)

Para praticar em qualquer lugar usando apenas o navegador:

  • Project IDX: O laboratório do Google com IA.
  • Replit: Excelente para colaboração rápida.
  • CodeSandbox: Ideal para testar blocos visuais.
  • GitHub.dev: Edição direta nos seus arquivos.

O Molde e o Cimento

<!DOCTYPE html>
<html>
<head>
  <!-- Metadados e Estilos -->
  <link rel="stylesheet" href="pico.css">
</head>
<body>
  <!-- BLOCOS AQUI -->
</body>
</html>
Pico.css: O Super Reset

Ele funciona como a "base profissional":

  • Limpa os estilos feios do navegador.
  • Dá uma cara moderna instantânea.
  • Permite que nossos blocos se encaixem perfeitamente.

A Ordem Importa!

O navegador lê seu site como uma receita, de cima para baixo:

1. Design Primeiro (Head)

O CSS deve vir antes de tudo. O site já "nasce" bonito.

2. Conteúdo Depois (Body)

O texto e as imagens aparecem seguindo as regras que o navegador leu antes.

3. Ação por Último (Script)

A interatividade não deve travar o desenho inicial da tela.

Missão: Compor seu Território

O Desafio:
  1. Acesse o catálogo de modelos da Rede Daora.
  2. Escolha o modelo que resolve seu problema agora.
  3. Copie o código e leve para o seu index.html no VS Code/GitHub.
  4. Reaproveite a estrutura e mude apenas o conteúdo (textos e imagens).
Lembrete:
O valor está em saber adaptar o que já existe para a sua necessidade real.

Site Modularizado!

Você agora pensa como um engenheiro de interfaces.