Inicialmente devemos definir:

  • Título do site
  • Domínio e hospedagem com e-mail
  • Objetivos com clareza. O que se pretende alcançar com a construção do site
  • Sobre a manutenção: adição de artigos, correções e exclusões. Quem fará e como
  • O que o site traz para se justificar a criação deste novo site. Que diferenciais
  • Que o site contenha uma seção de contato, onde o usuário encontrará endereço, telefone, whatsapp (caso de empresa), e-mail, facebook, instagran, twitter, etc
  • Todas as páginas devem conter um link para a home, melhor ainda, todas as páginas devem conter o menu principal e no topo
  • Usar ao menos 80% de conteúdo visual (texto e imagens) nas páginas;
  • Usar um layout clean
  • Que os links abram páginas internas ou, se externas, abram em outra aba e com um ícone indicando isso
  • Obrigatoriamente os sites devem ser responsívos e mobile-first
  • O site deve carregar em no máximo 3 segundos
  • Se possível crie uma página 404 bem bonita e também uma caixa de busca
  • Considere ter uma seção de ajuda no site, com conteúdo explicando sobre como navegar e encontrar. Melhor é que nem seja necessário

Usar

  • Tema com tons variando em uma única cor
  • Imagens com boa/ótima resolução e exclusivas
  • Redimensionar imagens grandes
  • Conteúdo exclusivo, de preferência, bem feito e de agradável leitura
  • Fontes com tamanho confortável para ler em geral
  • Evite mudar as disposições e padrões que os users já estão acostumados, como:
  • menu principal no topo
  • links sublinhados (caso remova o sublinhado encontre uma forma de mostrar que são links)
  • A navegação pelo conteúdo do site deve ser simples e intuitiva
  • Rodapé alto e dividido em 3 ou 4 partes contendo algo como o mapa do site. Confira aqui: https://pagespeed.web.dev/
  • Criar o site tendo em mente uma boa UX (experiência dos usuários)
  • Após concluir faça uma checagem geral do site, inclusive do código
  • Dependendo do site, um chat é importante e também um blog e um forum
  • Fique atento para técnicas de SEO
  • Lembre de facilitar a vida de quem dá manutenção no site

Evitar

  • Autoplay de áudio ou vídeo
  • Cores muito fortes
  • Contraste exagerado entre frente e fundo
  • Contrastes que escondam a frante (fonte com cor bem perto da cor de fundo)
  • Fontes muito pequenas, que dificultem a leitura
  • Fontes muito grandes, que as tornem destoantes
  • Algo que torna o site pesado:
  • Imagens muito grandes
  • Vídeos

  • Javascript com muito processamento

  • Não usar JS na tag head. Prefira ao final, logo acima da tag

https://lucasferraz.com.br/blog/boas-praticas-para-criacao-de-sites/

Sempre feche as tags

Use sempre a tag DOCTYPE, lang="pt-BR" e as demais abaixo, veja:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Evite usar o CSS inline. Sempre crie um arquivo externo e o inclua no HTML:

<link rel="stylesheet" type="text/css" href="style.css">

E dentro da tag 

<script type="text/javascript" src="script.js"></script>
</body>

Também nunca use javascript inline. Prefira em arquivo separado e importando no HTML

Use e abuse a ferramenta Inspector, com seus vários recursos

Escreva os nomes das tags em minúsculas

Use as tags H1 até H6 e a H1 somente uma vez em cada página

Use as tags semânticas do HTML 5 para organizar melhor seu código

Os frameworks, como bootstrap e jquery já vem com uma forte compatibilidade com os principais navegadores, portanto é uma boa ideia adotá-los. Mas é muito importante que os primeiros sites criados sejam sem usa-los, para que realmente aprenda sobre os assuntos

Um bom editor de código, como o VSCode ajuda na criação de sites

Após a conclusão do sites, as checagens e testes, então é uma boa ideia fazer um backup completo e então comprimir o CSS e o Javascript (versões minificadas) Existem alguns serviços online que fazem isso

Use o atributo alt em todas as imagens A corn field I visited.

Participe de bons grupos de discussão sobre os assuntos abordados: HTML, CSS e JS

Use resets de CSS

http://meyerweb.com/eric/tools/css/reset/index.html

Podemos começar com este:

html, body, div, span, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}

table {
        border-collapse: collapse;
        border-spacing: 0;
}

Não crie páginas sem a tag e seu precioso conteúdo

Use nas imagens

<figure>
    <img src=“a-man-coding.jpg” alt=“A man working on his computer”>
    <figcaption> This is a picture of a man working on his computer</figcaption>
</figure>

Não use div para criar header nem footer, mas estas tags: header e footer

Evite usar e , use e

O Google Analitcs pode ajudar também mostrando o desempenho do site

Dividir as páginas de conteúdo em duas colunas para facilitar a leitura

Ao usar CSS de algum framework, use o minificado mas mantenha o fonte para o caso de querer editar. Evite editar, para isso crie um style.css com seu código que sobrescreverá o do framework e o insira logo abaixo do css do framework no head.