Como criar seu primeiro site com HTML e CSS

Seu primeiro site não precisa ser grande. O objetivo é sair da teoria com uma página pequena que você entende por inteiro.

Se HTML e CSS ainda parecem a mesma coisa, leia primeiro HTML, CSS e JavaScript: entenda a diferença.

Crie a pasta do projeto

Comece com uma pasta chamada meu-primeiro-site.

Dentro dela, crie dois arquivos:

meu-primeiro-site/
├── index.html
└── style.css

O arquivo index.html será a página. O style.css guardará as regras visuais.

Escreva o HTML

No index.html, use esta estrutura:

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Meu primeiro site</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <h1>Olá, web!</h1>
      <p>Esta é minha primeira página.</p>
      <a href="https://developer.mozilla.org/">Continuar estudando</a>
    </main>
  </body>
</html>

Salve o arquivo.

Abra no navegador

Agora abra o index.html no navegador.

Você deve enxergar:

• o título “Olá, web!”;
• o parágrafo;
• o link.

Nesse momento, a página ainda terá aparência simples. Isso é esperado.

O primeiro objetivo é provar que o HTML está sendo interpretado corretamente.

Entenda as partes principais

Alguns elementos merecem atenção:

• <!doctype html> indica um documento HTML moderno;
• <html lang="pt-BR"> informa o idioma;
• <head> guarda metadados;
• <body> contém o conteúdo visível;
• <main> identifica o conteúdo principal;
• <h1> é o título principal.

Você não precisa decorar cada detalhe agora. Apenas comece a reconhecer a estrutura.

Conecte o CSS

Esta linha do HTML:

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

diz ao navegador para carregar o arquivo style.css.

Se o nome ou caminho estiver errado, o HTML ainda aparece, mas os estilos não serão aplicados.

Adicione o CSS

No style.css, escreva:

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  line-height: 1.6;
}

main {
  width: min(720px, 90%);
  margin: 4rem auto;
}

h1 {
  margin-bottom: 1rem;
}

Salve e recarregue a página.

Agora você consegue observar claramente a separação entre estrutura e apresentação.

Faça uma alteração e observe

Mude temporariamente:

main {
  width: min(560px, 90%);
  margin: 4rem auto;
}

Recarregue a página e veja a diferença.

Depois teste outro valor.

Esse processo de alterar → salvar → recarregar → observar é uma das formas mais simples de aprender frontend.

Adicione uma nova seção

No HTML, abaixo do primeiro parágrafo, acrescente:

<section>
  <h2>O que estou aprendendo</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</section>

Agora sua página já possui uma pequena hierarquia de conteúdo.

Teste em uma janela estreita

Reduza a largura do navegador.

Como usamos:

width: min(720px, 90%);

o conteúdo consegue se adaptar a janelas menores.

Isso já introduz uma ideia importante de responsividade: a página precisa funcionar em diferentes larguras.

Erros comuns no começo

Se algo não funcionar, confira:

• o arquivo foi salvo?
• o nome está exatamente como style.css?
• o href do <link> está correto?
• alguma tag foi aberta e não fechada?
• você está editando o mesmo arquivo que abriu no navegador?

Essas verificações simples resolvem muitos problemas iniciais.

Faça uma melhoria por vez

Depois que a base funcionar:

1. adicione uma segunda seção;
2. crie uma lista;
3. ajuste espaçamentos;
4. altere o tamanho do título;
5. experimente um link interno;
6. teste novamente em tela estreita.

Evite copiar um layout inteiro sem entender. Pequenas mudanças ajudam a perceber causa e efeito.

O que você deve conseguir explicar

Ao terminar, responda:

• por que existe um index.html;
• como o CSS é conectado ao HTML;
• o que muda quando você altera uma regra CSS;
• quais partes são conteúdo;
• quais partes são apresentação.

Se essas respostas estiverem claras, o projeto cumpriu seu papel.

Próximo passo

Antes de adicionar mais recursos, aprenda como usar o DevTools do navegador para inspecionar o HTML e o CSS da página e entender melhor o que acontece quando algo não sai como esperado.

Agora adicione lógica aprendendo JavaScript para iniciantes: variáveis, condições e funções.

Depois, registre a evolução desse projeto com Git e GitHub.

A sequência completa está na trilha Primeiros passos na programação.

Assuntos: htmlcssprojetofrontend

Recursos para este guia

Pesquisado pelo DejotaCode

Hospedagem para o primeiro site

Serviço digital para publicar um projeto web depois que o leitor já aprendeu a criar sua primeira página.

Recursos para este guia

Pesquisado pelo DejotaCode

Logitech MX Keys Mini

Teclado sem fio compacto e retroiluminado, pesquisado para estudo, programação e setups com pouco espaço.

Recursos para este guia

Pesquisado pelo DejotaCode

UGREEN Uno Hub USB-C 6 em 1

Hub USB-C UGREEN Uno com HDMI 4K/60 Hz, USB de alta velocidade e carregamento PD, pesquisado para setups de estudo e programação.

Recursos para este guia

Visual Studio Code

Editor usado para escrever, organizar e revisar os arquivos do projeto.

Sem comissão · Gratuito

Informações do recurso

Indicado para: Quem está começando a programar e deseja um editor extensível.

Limitação: Extensões demais podem deixar o ambiente confuso e pesado.

Revisado em 17/09/2026.

Recursos para este guia

Programação do Iniciante ao Avançado

E-book de terceiro que apresenta fundamentos, HTML, CSS, JavaScript, backend, Git, arquitetura de sistemas e carreira em tecnologia.

Link de afiliado · E-book pago · preço sujeito a alteração

Informações do recurso

Indicado para: Iniciantes que querem ampliar a visão além dos primeiros exercícios de programação e desenvolvimento web.

Limitação: O DejotaCode não adquiriu nem avaliou o conteúdo completo; a descrição apresentada aqui foi conferida com as informações públicas exibidas atualmente pela página da Hotmart.

Revisado em 29/09/2026.

Algumas recomendações poderão conter links de afiliados; a relação comercial é informada na página de destino.