O que você vai aprender
- Como descrever uma única tarefa do usuário em vez de “faça um site”
- Como montar a página por partes: estrutura, estilos, comportamento
- Como testar a página no celular e pelo teclado
- O que nunca colocar no código da página
Conceitos-chave
- HTML
- A estrutura da página: títulos, texto, botões, formulários.
- CSS
- O visual: cores, fontes, espaçamentos, adaptação à tela.
- JavaScript
- O comportamento: o que acontece ao tocar, o envio de formulários, animações.
- Responsividade
- A página é igualmente confortável no celular, no tablet e no computador.
01Descreva um cenário
Escolha um usuário e uma ação: encontrar um material, deixar um pedido, abrir um catálogo. Anote o que a pessoa vê antes da ação e o que obtém depois. Essa é a tarefa da primeira versão.
Exemplo. “Um streamer entra na página, em 10 segundos entende que as doações chegam direto à sua carteira e toca em “Criar link”.”
02Monte por partes
Peça à IA primeiro só a estrutura em HTML: título, descrição, três vantagens e um botão. Depois, os estilos, e depois o comportamento. Confira cada parte no navegador antes de passar à seguinte: assim o erro é fácil de achar.
Dica. Peça comentários curtos no código: assim ele é mais fácil de manter.
03Teste no celular e pelo teclado
Abra a página em uma tela estreita: nada deve sair da borda, e os botões devem poder ser tocados com o dedo. Percorra a página com a tecla Tab: cada link e botão deve receber um foco visível.
- Largura de 360 pixels sem rolagem horizontal
- Fonte principal de no mínimo 16 pixels
- Os campos do formulário têm rótulos
- Todos os links funcionam
04Segurança
Tudo o que está no código da página é visível a qualquer visitante. Chaves de API, senhas e tokens nunca vão no código da página: ficam guardados no servidor.
- Não coloque chaves e senhas em HTML e JavaScript
- Não inclua scripts de sites desconhecidos
05Prepare para a publicação
Acrescente um título de página (title) e uma descrição (description) claros: os buscadores os exibem. Confira se as imagens têm descrições (alt) e se a página abre rápido na internet móvel.
Antes de publicar
- A página resolve um cenário claro
- No celular não há rolagem horizontal
- Todos os botões e links funcionam e são acessíveis pelo teclado
- No código não há chaves, senhas nem tokens
- Existem title, description e descrições das imagens
Erros comuns e como evitá-los
Pedir à IA para “fazer o site inteiro” de uma vez
Comece por um cenário e monte por partes.
Testar só no computador
A maioria dos visitantes vem do celular.
Uma chave de API direto no código da página
Segredos ficam apenas no servidor.
Publicar sem title e description
Sem eles, a página é encontrada pior nas buscas.
Experimente você mesmo
Monte a página do seu projeto: título, descrição, três recursos e uma ação que funcione.
- Descreva o cenário do usuário em uma frase
- Peça à IA a estrutura em HTML e confira no navegador
- Acrescente os estilos e teste com largura de 360 pixels
- Percorra a página com a tecla Tab e anote o que encontrou
Resultado. Uma página funcional e a lista de verificações pelas quais ela passou.
Teste seus conhecimentos
Primeiro responda mentalmente, depois abra a resposta.
1Por que é melhor montar a página por partes?Resposta
Cada parte é conferida na hora, e o erro é fácil de achar. Um código grande, de uma vez, é difícil de depurar.
2Posso guardar uma chave de API no JavaScript da página?Resposta
Não. O código da página é visível a qualquer visitante; as chaves ficam no servidor.
3Como conferir rapidamente a acessibilidade da página?Resposta
Percorrê-la com a tecla Tab: todos os botões e links devem receber um foco visível.
Em resumo
Um cenário, montagem por partes com conferência no navegador, celular e teclado, nenhum segredo no código, title e description claros. Assim a primeira página fica funcional, e não apenas bonita.