Conclua e revise seu Caderno CSS

Neste capítulo você vai transformar o projeto acumulado numa entrega coerente e revisá-lo com critérios claros.

Seu ponto de partida

Continue depois do capítulo 10. Abra pacote de exemplos/11-projeto-revisao. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Defina o que a página ajuda a fazer

O projeto já cresceu. Antes de acrescentar outra regra, leia as duas páginas como uma pessoa que não acompanhou o volume. Ela consegue saber o assunto, encontrar a prática e entender que os dados são fictícios?

O objetivo do Caderno CSS é organizar uma pequena rotina de estudo com recursos de consulta. A página inicial apresenta a rotina e as trilhas. A página Prática reúne agenda, perguntas e formulário demonstrativo.

Você vai ajustar textos e títulos dentro desse recorte. Não precisa acrescentar cadastro, busca, servidor ou um painel administrativo para concluir CSS. Esses recursos introduzem outras tarefas de aprendizagem.

Planejar significa escolher o que precisa existir para a finalidade. Um projeto pequeno pode estar completo. Cada novo bloco deve ajudar a pessoa a ler, navegar ou praticar.

Faça no seu exemplo

Abra index.html e pratica.html no editor. Leia os textos antes de editar.

Mude uma coisa e preveja

Troque a apresentação por uma frase que explique o propósito do caderno, mantendo o conteúdo fictício.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Abra no navegador e leia título, apresentação e menu em sequência. Verifique se o destino Prática corresponde ao que a página promete.

Resultado esperado neste teste: Uma pessoa deve compreender o objetivo sem ler o restante do volume.

Se não acontecer

Não preencha o projeto com dados pessoais para torná-lo mais real. Use personagens, assuntos e endereços fictícios.

Faça uma revisão que inclui ações

A revisão precisa incluir o uso da página. Confira cada link, não apenas a cor dos links. Abra cada pergunta e teste o formulário vazio, inválido e válido com dados fictícios.

Percorra a página com Tab. O foco deve aparecer e acompanhar uma sequência compreensível. Ative os links com Enter. Clique nos rótulos dos campos e observe se o cursor ou a seleção chegam ao controle correspondente.

Teste janela estreita, janela larga e zoom de 200%. Confira imagem, tabela e cartões. A tabela pode ter sua própria rolagem; o restante da página deve continuar dentro da área de leitura.

Se encontrar um problema, descreva primeiro a ação e o resultado. Depois modifique uma regra e repita a ação que apresentou falha. Acrescentar várias correções juntas dificulta saber o que resolveu.

Faça no seu exemplo

Use a lista de conferência no fim deste volume. Não há nova biblioteca nem ferramenta obrigatória.

Mude uma coisa e preveja

Acrescente uma frase comprida ao terceiro cartão e repita o teste de janela estreita.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Registre o resultado, remova a frase de teste e repita a navegação final.

Resultado esperado neste teste: O cartão deve crescer sem sobrepor o próximo conteúdo nem perder seu link.

Se não acontecer

Não considere revisão concluída só porque não apareceu uma mensagem de erro. Pode haver um link errado que abre outra página existente.

Guarde uma versão que pode ser recuperada

Uma personalização pequena fica mais fácil de manter quando você sabe o que mudou. Custom.css reúne seus ajustes, e simple.css mantém a cópia da base. Não misture os dois durante a organização final.

Antes de uma alteração grande, copie a pasta do projeto para um nome como caderno-css-antes-da-revisao. Depois trabalhe numa segunda cópia. Isso permite recuperar os arquivos sem tentar lembrar cada valor anterior.

Para atualizar a base em outro momento, teste uma cópia do projeto com a nova versão e repita a revisão. Não substitua silenciosamente o arquivo que sustenta um exercício já concluído. A edição deste volume utiliza a cópia local registrada no README.

Git é uma ferramenta possível para guardar versões, mas não é requisito deste volume. Uma cópia organizada e notas curtas são suficientes para aprender esta rotina inicial.

Faça no seu exemplo

Compare esta estrutura com os arquivos do exemplo. A pasta inicio serve para praticar e não é parte necessária de um futuro site.

caderno-css/
  index.html
  pratica.html
  simple.css
  custom.css
  app.js
  LICENSE-SimpleCSS.txt
  imagens/

Mude uma coisa e preveja

Crie uma cópia da pasta pronta e acrescente uma nota de revisão num arquivo separado.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Abra index.html da cópia, altere um título e confirme que a referência original permaneceu intacta.

Resultado esperado neste teste: A versão anterior continuará disponível mesmo que a nova alteração não funcione.

Se não acontecer

Não faça a cópia dentro da mesma pasta repetidamente. Isso cria conjuntos aninhados e dificulta identificar qual versão está aberta.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Registro de conferência

Anote o navegador e a condição que realmente testou. Uma conferência local não equivale a testar todos os aparelhos.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Escreva uma apresentação que explique a finalidade do caderno.
2. Registre os testes das duas páginas.
3. Crie uma cópia de segurança e restaure uma alteração propositalmente ruim.

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Uma possibilidade é Este caderno organiza rotinas, perguntas e exercícios locais de CSS. O texto deve corresponder ao conteúdo existente.

2. Anote ação, condição e resultado, incluindo teclado, zoom e formulário. Não generalize para aparelhos que não testou.

3. Abra a cópia preservada, recupere o arquivo alterado e repita a ação que falhou. A recuperação precisa ser conferida no navegador.

Quando seguir

O projeto tem finalidade clara, navegação funcional e uma versão que você consegue recuperar. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1

O arquivo completo

Referência do exemplo 11-projeto-revisao, reproduzida aqui para que você possa conferir sem sair da página.

app.js

const form = document.querySelector("#form-estudo");
const resultado = document.querySelector("#resultado");
const conferir = document.querySelector("#conferir");
if (form && resultado && conferir) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    resultado.textContent =
      "Preenchimento válido no navegador. Nenhum dado foi enviado.";
  });
  form.addEventListener("reset", () => {
    resultado.textContent = "";
  });
  conferir.disabled = false;
}