Isaque Victor cursos gratuitosNesta aula
Você não vai escrever código. Vai ler o suficiente para saber se a IA fez certo.
Com o briefing pronto, gerar a página é rápido. O que dá trabalho é olhar, achar o que está errado e pedir a correção certa sem quebrar o resto.
- Gerar a página inicial com um pedido bem feito
- Separar o que é estrutura (HTML) do que é aparência (CSS)
- Ajustar a página pelo celular, um problema por vez
O pedido de construção
Como o trabalho de pensar já está no briefing, o pedido é curto: só as regras técnicas. Um arquivo só, sem JavaScript e sem bibliotecas, porque cada linha a menos é uma linha a menos para dar errado. E use somente os textos do briefing.
HTML e CSS, o mínimo
O HTML diz o que existe. O CSS diz como aparece. A ponte entre os dois é a class, um apelido. Se a tag diz class="botao", no CSS a regra .botao muda a cor, o tamanho e o espaço dele.
| Procure por | O que muda |
|---|---|
color, background | Cor do texto e do fundo |
font-size | Tamanho da letra |
padding, margin | Espaço por dentro e por fora |
@media | Regras que valem só em tela pequena |
Exemplo real
Um dono de oficina achou a regra .destaque { color: #999; }. O "atendemos hoje" estava cinza e sumia no sol do celular. Trocou para #000, salvou, recarregou. Dois minutos, sem pedir nada à IA.
Dica
Para achar qualquer coisa no arquivo, use Ctrl + F (Command + F no Mac) e digite um pedaço do texto que você vê na tela.
Coisa de profissional
Toda página gerada deve ter, dentro do <head>, a linha <meta name="viewport" content="width=device-width">. Sem ela, o celular finge ter uma tela larga, de uns 980 px, desenha a página nesse tamanho e depois a encolhe. O texto fica minúsculo e as regras do @media para tela pequena nunca disparam. Se o seu site "ignora" o CSS do celular, confira essa linha antes de qualquer outra coisa.
Olhar e pedir o ajuste
Olhe em quatro passos: as seções estão na ordem? Como fica no celular? Cada link funciona? Há texto que você não escreveu? Depois, um problema por pedido.
Para ver como fica no celular, estreite a janela do navegador até ficar fina, ou mande o arquivo para você mesmo pelo WhatsApp. A maioria dos problemas aparece ali: texto que sai da tela, botão pequeno, colunas espremidas.
Ruim: "ficou estranho no celular, arruma."
Bom: "No celular, na seção 'O que temos', os seis itens ficam em duas colunas e o texto corta. Um item por linha. Não mude mais nada."
O "não mude mais nada" evita que a IA "melhore" o que já estava bom. Se um ajuste quebrar algo, diga na hora e peça para desfazer.
Cuidado
Se um ajuste quebrar algo que funcionava, avise na hora: "o último ajuste fez o menu sumir no computador; desfaça e tente outro jeito". Na aula 9 você aprende a guardar versões para voltar atrás com segurança.
Prática · 10 min
- Cole o pedido de construção na ferramenta, aberta na pasta, e aprove o
index.html. - Cheque as seções, o celular (estreite a janela), os cliques e os textos inventados.
- Faça três ajustes, um por pedido. Mude uma cor no CSS com as suas mãos. Salve uma cópia como
index-v1.html.
index-v1.html.Resumo
- Com briefing, o pedido de construção é curto e usa só os textos reais.
- HTML é o que existe. CSS é como aparece. Classe liga os dois.
- Um problema por pedido, com "onde, o quê, em que tela" e "não mude mais nada".
- A linha viewport faz o celular usar a largura real da tela.
Quiz da aula
Três situações para aplicar o que viu.