Conclusão e próximos passos

Você percorreu o CSS do Laboratório Belavista: caixa, seletores, cascata, layout, componentes visuais, movimento e consultas. O ateliê fictício em Recife era o fio; o ofício continua no seu próximo projeto.

Use o exemplo 58-conclusao do pacote anexo como checagem final: HTML com lang="pt-BR", CSS em arquivo próprio, foco visível, contraste e layout que não quebra em tela estreita. Ciclo de sempre: ler → mudar uma coisa → prever → recarregar → conferir. Só 127.0.0.1 para servidor local — não publique os exercícios como site “oficial” sem revisar.

O que você leva daqui

• Modelo de caixa, cascata, especificidade e herança.
• Flex, Grid e propriedades lógicas.
• Tokens (custom properties), espaçamento e tipografia.
• Estados (pseudo-classes), foco e cursores.
• Camadas visuais: borda, sombra, fundo, overflow.
• Movimento com transição e noção de View Transitions.
• Componentes que reagem ao contêiner (@container).

Checklist do Belavista

Antes de encerrar o volume, confira no exemplo 58:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Belavista — revisão final</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <a class="skip" href="#conteudo">Ir para o conteúdo</a>
    <header>
      <p class="marca">Laboratório Belavista</p>
      <nav aria-label="Principal">
        <a href="#conteudo" aria-current="page">Vitrine</a>
      </nav>
    </header>
    <main id="conteudo" tabindex="-1">
      <h1>Revisão da oficina</h1>
      <p>Mude uma regra em <code>styles.css</code>, preveja e confira.</p>
      <button type="button">OK</button>
    </main>
  </body>
</html>

:root {
  --cor-marca: #8b1e1e;
  --cor-tinta: #1a1a1a;
  --cor-papel: #f7f4ef;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: var(--cor-tinta);
  background: var(--cor-papel);
  line-height: 1.5;
}

.skip:focus {
  position: static;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--cor-marca);
  outline-offset: 3px;
}

.marca {
  font-weight: 700;
  color: var(--cor-marca);
}

Erro comum: declarar o volume “pronto” sem abrir o exemplo, sem Tab no teclado e sem zoom. Conferência é parte do ofício.

Como continuar praticando

1. Remixe o Belavista: nova paleta só com custom properties.
2. Refaça um cartão só com Grid + gap + lógicos.
3. Leia a documentação de uma propriedade que ainda assusta (MDN) e teste num arquivo mínimo.
4. Compare @media e @container no mesmo componente.
5. Revise contraste e foco em toda página que você publicar de verdade.

Limites deste volume

Formulários aqui são marcação e validação visual. Sem banco, sem cadastro real, sem PHP nesta pasta. Arquivo no disco ≠ publicação. Conteúdo fictício.

Critério para “terminei”

Você termina se: explica caixa e cascata com as próprias palavras; monta um layout Flex ou Grid estável; deixa foco e contraste utilizáveis; sabe onde buscar a referência oficial quando esquecer a sintaxe.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Cite três temas CSS desta faixa que você usaria amanhã num site simples.
2. Qual a diferença entre testar em file:// e em http://127.0.0.1?
3. Por que custom properties no :root ajudam a “remixar” o Belavista?

Respostas comentadas

1. Exemplos válidos: Flex/Grid, tipografia, foco, variáveis, espaçamento com gap — qualquer trio que você consiga demonstrar no exemplo.
2. Ambos são locais; o servidor em 127.0.0.1 aproxima caminhos, módulos e hábitos de publicação sem expor a máquina em 0.0.0.0.
3. Mudar tokens centrais (cor, espaço, raio) propaga o visual sem caçar valores espalhados.