Adicione esta página aos favoritos para consultar durante o curso.
Lista de Verificação de Padrões de Desenvolvimento Web
Visão Geral
Exigir uma lista de verificação de padrões de desenvolvimento de front-end web ajuda a alcançar os resultados de aprendizagem ao fornecer feedback focado e uma abordagem disciplinada. Alguns itens na lista de verificação podem ser opinativos e dependentes, mas estar vinculado aos padrões básicos específicos de uma organização é comum nessa área de atuação.
Esses padrões de desenvolvimento são modelados, em parte, com base em The Front-End
Checklist de David Dias.
A maioria das referências complementares
apontam para fontes do MDN Web Docs.
Lista de Verificação de Padrões
- ✔ Todas as pastas e arquivos seguem as regras/convenções de nomenclatura do curso, que incluem apenas letras minúsculas, sem espaços e com significado, ou seja, são semânticas.
- ✔ Declaração do Tipo de
Documento
<!DOCTYPE html> - ✔ Atributo lang do HTML
<html lang="pt-BR">
Head
- ✔ Atributo Meta Charset
<meta charset="utf-8"> - ✔ Elemento Meta Viewport
<meta name="viewport" content="width=device-width, initial-scale=1"> - ✔ Elemento Title
- ✔ Elemento Meta Description
- ✔ Elemento Meta Author
- ✔ Referências de Arquivo Externas CSS são usadas e na ordem correta.
HTML
- ✔ O HTML é compatível com o W3C e é válido. Validador W3C
- ✔ Elementos Semânticos são usados. O uso de tags semânticas HTML modernas dá significado ao conteúdo da página.
- ✔ Não há links quebrados na página. Verificador de Links W3C
CSS
- ✔ O HTML é compatível com o W3C e é válido. Validador W3C
- ✔ Seletores de ID exclusivos – Se um seletor de ID for usado, ele será exclusivo de uma página. O uso planejado do seletor de classe é preferível.
Acessibilidade e Boas Práticas
- ✔ As imagens são otimizadas para atender às necessidades de design do site.
- ✔ As proporções das imagens não são alteradas para nenhuma imagem.
- ✔ Cada imagem tem um atributo alt e ele é relevante para descrever a imagem não decorativa.
- ✔ Um título (heading) <h1> é necessário e há apenas uma instância em uma página.
O título <h1> deve representar com precisão o assunto principal ou a finalidade da página e estar alinhado ao conteúdo de <title> do documento. Ele deve resumir sucintamente o conteúdo e conter uma indicação clara do que se trata a página. Embora os títulos <h1> possam ser estilizados usando CSS para hierarquia visual, seu objetivo principal é dar significado semântico ao conteúdo.
- ✔ Os títulos são usados na ordem correta para delinear a página.
Use elementos de título (<h2> a <h6>) para criar uma hierarquia lógica de conteúdo. Os títulos devem ser aninhados adequadamente para refletir a estrutura e a relação entre as diferentes seções da página.
- ✔ Nenhuma violação de contraste de cores no nível AA. Use a DevTools CSS Overview para testar: ▶️ Como Usar o CSS Overview
- ✔ Erros e avisos de teste de acessibilidade são revisados
- ✔ O tamanho da página não pode exceder 500 kB transferidos, conforme medido
pela DevTools > Network > e cache limpo. (Os mapas incorporados do Google não estão
incluídos neste total.)
Teste de Tamanho de Página na DevTools do Navegador
DevTools: Para iniciar Ferramentas do Desenvolvedor (DevTools) em um navegador, clique com o botão direito do mouse na página para exibir um menu de opções e selecione "Inspecionar" ou use o atalho de teclado Ctrl+Shift+I ou Cmd+Option+I no Mac.
Você também pode iniciar o DevTools no menu de configurações, em "Mais ferramentas >".
O menu de configurações do navegador geralmente é acessado por um botão no canto superior direito da aplicação. Ele pode aparecer como um menu de "hambúrguer" de três linhas (☰), um menu vertical de "kebab" de três pontos (⋮) ou um menu horizontal de "almôndegas" de três pontos (⋯).
Aba Network: Na DevTools, navegue até a aba "Network". Faça uma atualização completa da página com Ctrl+Shift+R, ou Cmd+Option+R no Mac, ou clique com o botão direito do mouse no botão de atualização próximo à barra de endereço URL para ver a opção de atualização completa. O tamanho total transferido é exibido na parte inferior da aba como "transferred".