Guias breves sobre desenvolvimento e otimização, com referências para você aprofundar cada tema.
Entenda as diferenças entre CSS Grid e Flexbox e como escolher a estrutura de um layout responsivo.
Grid organiza linhas e colunas; Flexbox organiza os itens em uma direção. Uma grade de produtos pode usar Grid, enquanto a navegação e os botões de uma seção podem usar Flexbox. A escolha depende de como o conteúdo precisa se alinhar em cada tamanho de tela.
Referência do MDN sobre Grid e FlexboxComo orientar o preenchimento dos campos e combinar a validação no navegador com as verificações no servidor.
Comece pelos recursos do HTML, como campos obrigatórios e tipos de e-mail. Use JavaScript para explicar o que precisa ser corrigido e preservar os dados preenchidos. A validação também deve ocorrer no servidor: a verificação no navegador ajuda o usuário, mas pode ser contornada.
Guia do MDN sobre validação de formuláriosTamanho, formato, compressão e carregamento: os principais cuidados para imagens claras e páginas mais leves.
Envie imagens próximas ao tamanho em que serão exibidas e compare formatos e compressão. Ofereça tamanhos adequados ao celular e reserve espaço para a imagem. Imagens abaixo da primeira tela podem carregar sob demanda; a imagem principal precisa estar disponível com prioridade.
Guia de imagens do web.devCuidados com validação de dados, mensagens de retorno e envio de e-mail usando PHPMailer.
Valide os dados no servidor e trate falhas de envio com uma mensagem clara. Para o envio por SMTP, uma biblioteca como PHPMailer oferece autenticação e tratamento das mensagens. As credenciais devem ficar na configuração do servidor, fora do HTML entregue ao visitante.
Documentação oficial do PHPMailerConteúdo útil, títulos claros, links internos e imagens descritas ajudam a organizar a presença do seu site nos buscadores.
Use títulos que descrevam cada página e conteúdo que responda às necessidades do visitante. Organize links internos, descrições e textos alternativos de imagens. Permita que os buscadores encontrem suas páginas e acompanhe a indexação; uma meta tag isolada não garante posicionamento.
Guia de SEO do GoogleComo escolher e gerenciar extensões que ajudam na edição, formatação e revisão de um projeto web.
O VS Code permite instalar e gerenciar extensões pelo Marketplace. Escolha ferramentas que atendam ao seu fluxo, confira o autor e as permissões solicitadas e mantenha apenas as que são necessárias. Formatação, visualização local e histórico do código podem ajudar na rotina de trabalho.
Guia oficial de extensões do VS Code