Construindo a página com IA: gerar, olhar, ajustar, repetir

Nesta aula

Você não vai escrever código. Vai ler o suficiente para saber se a IA fez certo.

Com o briefing pronto, a construção da página é surpreendentemente rápida. O que demora é o depois: olhar, achar o que está errado, pedir a correção certa, sem quebrar o resto. Nesta aula você faz o ciclo completo e aprende o mínimo de HTML e CSS para conferir o resultado. Não é um curso de programação. É o que um dono de negócio precisa saber para não depender cegamente da IA.

• Ao final, você vai saber gerar a página inicial a partir do briefing com um único pedido bem feito.
• Vai reconhecer, no arquivo gerado, o que é estrutura (HTML) e o que é aparência (CSS).
• Vai sair com a página inicial completa, testada no celular e ajustada por você.

O pedido de construção

Com o briefing.md na pasta, o pedido para gerar a página fica curto, porque o trabalho de pensar já foi feito. O que sobra é dizer as regras técnicas que deixam o resultado simples de manter:

Cada regra tem motivo. Um único arquivo é mais fácil de publicar e de ler. Sem JavaScript, porque uma página informativa não precisa e cada linha a menos é uma linha a menos para dar errado. Sem biblioteca externa, porque a página não deve depender de um servidor de terceiros para carregar. "Somente os textos do briefing" é a regra contra invenção. E o pedido de explicação no fim é a sua aula particular.

Aprove a criação do arquivo, abra o index.html no navegador e olhe com calma. Depois, abra o arquivo no editor. Vamos entender o que está lá.

HTML: o que existe e em que ordem

Na aula 3 você viu o esqueleto: head, body, h1, p, a. Uma página completa usa mais algumas tags, e todas seguem a mesma lógica: abrem, têm conteúdo, fecham. As que você vai encontrar:

Repare em como a IA nomeia as coisas. Quase toda tag vem com um atributo class="alguma-coisa". Isso é um apelido. Por exemplo:

<section class="encomendas">
  <h2>Encomendas</h2>
  <p>Bolos e salgados com 24 h de antecedência.</p>
  <a class="botao" href="https://wa.me/5581900000000">Encomendar no WhatsApp</a>
</section>

Você consegue ler isso: uma seção chamada "encomendas", com título, um parágrafo e um link marcado como "botao". Quando você quiser mudar o texto do link, é aqui. Quando quiser mudar a cor do botão, é no CSS, procurando pelo apelido botao.

CSS: como cada coisa aparece

O CSS fica dentro da tag <style>, no head. Cada regra tem um seletor (para quem vale) e, entre chaves, as propriedades (o que muda). Exemplo do botão de cima:

.botao {
  background: #c8501f;   /* cor de fundo, em código hexadecimal */
  color: #ffffff;        /* cor do texto */
  padding: 14px 24px;    /* espaço interno: em cima/embaixo e nos lados */
  border-radius: 999px;  /* cantos bem arredondados */
  font-size: 18px;       /* tamanho da letra */
}

O ponto antes de botao significa "quem tem a classe botao". Tudo entre chaves vale para todos os elementos com essa classe. As propriedades que você mais vai ver:

• color e background: cor do texto e do fundo. Cores em hexadecimal (#c8501f) ou por nome (white).
• font-size: tamanho da letra. font-family: a fonte.
• padding: espaço por dentro. margin: espaço por fora. Quando algo parece "apertado", é um desses dois.
• max-width: largura máxima. É o que impede o texto de ficar esticado demais em tela grande.
• display, flex, grid: como as coisas se organizam lado a lado. Aqui você não precisa entender, só reconhecer que é "arrumação".

E o celular? Você vai ver um bloco que começa com @media (max-width: ...). Tudo dentro dele vale só quando a tela é menor do que aquela largura. É ali que a IA coloca "no celular, empilhe as colunas" e "no celular, botão ocupa a largura toda". Quando algo quebra só no celular, é nesse bloco que a correção acontece.

O ciclo: olhar, pedir um ajuste, repetir

Depois de gerar, você entra no ciclo que vai repetir em todo projeto. O segredo é a qualidade do olhar e a precisão do pedido.

Como olhar

1. No computador: role a página inteira. Cada seção do briefing está lá, na ordem? O botão principal aparece logo no começo?
2. No celular: mande o arquivo para o seu celular (por e-mail ou WhatsApp para você mesmo) e abra, ou reduza a janela do navegador do computador até ficar estreita como um celular. A maioria dos problemas aparece aqui: texto que sai da tela, botão pequeno demais, menu que não cabe.
3. Clique em tudo: cada link do menu leva para a seção certa? O WhatsApp abre com o número certo?
4. Leia os textos: tem algo que você não escreveu e não está entre colchetes? Se tiver, a IA inventou. Remova ou corrija.

Como pedir o ajuste

Um problema por pedido. Diga onde, o que acontece, em que tela, e limite a mudança. Compare:

O "não mude mais nada" é importante. Sem ele, a IA aproveita para "melhorar" outras coisas, e você perde o controle do que mudou. Depois de cada ajuste, recarregue e confira o problema específico e uma olhada geral para ver se nada mais mudou.