HTML e CSS para iniciantes: como fazer seu primeiro site do zero

Atualizado em 3 de novembro de 2026 · Leitura de 5 min

Edson Feitosa de Oliveira Junior Fundador e Engenheiro Líder · PruPru Digital Services

HTML e CSS são as duas linguagens sobre as quais todo site é construído: HTML define a estrutura e o conteúdo, e CSS define a aparência. Aprender as duas é o primeiro passo de quem quer trabalhar com desenvolvimento web, e também uma habilidade útil para quem só quer entender e ajustar o site do próprio negócio. A melhor forma de aprender é construindo algo, então este guia monta uma página pessoal simples do zero.

O que você precisa

• Um editor de código. O VS Code é gratuito e o mais usado.
• Um navegador moderno.
• Uma pasta no computador para o projeto.

Crie na pasta dois arquivos: index.html e style.css.

A estrutura básica do HTML e do CSS

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ana Silva | Designer em Natal</title>
  <meta name="description" content="Portfólio de Ana Silva, designer gráfica em Natal/RN.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav>
      <a href="#sobre">Sobre</a>
      <a href="#trabalhos">Trabalhos</a>
      <a href="#contato">Contato</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Ana Silva</h1>
      <p>Designer gráfica. Identidade visual para pequenos negócios.</p>
    </section>

    <section id="sobre">
      <h2>Sobre</h2>
      <p>Trabalho há cinco anos com marcas de restaurantes e lojas locais.</p>
    </section>

    <section id="trabalhos">
      <h2>Trabalhos</h2>
      <div class="cards">
        <article class="card">
          <img src="cafe.jpg" alt="Logotipo do Café Ponta Negra em marrom e creme">
          <h3>Café Ponta Negra</h3>
        </article>
        <article class="card">
          <img src="loja.jpg" alt="Sacola da loja Bela Moda com a nova marca">
          <h3>Bela Moda</h3>
        </article>
      </div>
    </section>

    <section id="contato">
      <h2>Contato</h2>
      <a class="botao" href="mailto:ana@exemplo.com">Enviar e-mail</a>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Ana Silva</p>
  </footer>
</body>
</html>

O que observar

• <head> contém informações sobre a página: o título que aparece na aba e no Google, a descrição e o link para o CSS.
• <meta name="viewport"> é essencial para o site funcionar no celular. Sem ela, o celular mostra a página "encolhida".
• Tags semânticas (header, nav, main, section, article, footer) descrevem o papel de cada parte. Elas ajudam leitores de tela e o Google a entender a página, muito melhor do que usar div para tudo.
• Um único h1 por página, seguido de h2 e h3 em ordem.
• O atributo alt em todas as imagens, descrevendo o conteúdo. Veja acessibilidade básica em sites.

O CSS

No style.css:

:root {
  --cor-texto: #1e293b;
  --cor-fundo: #f8fafc;
  --cor-destaque: #00b368;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

nav {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 16px;
}

nav a { color: var(--cor-texto); text-decoration: none; }

main { max-width: 960px; margin: 0 auto; padding: 0 16px; }

.hero { text-align: center; padding: 64px 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.card img { width: 100%; height: auto; border-radius: 8px; }

.botao {
  display: inline-block;
  background: var(--cor-destaque);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
}

Conceitos importantes

• Seletores: body seleciona a tag, .card seleciona a classe, #sobre seleciona o id.
• Variáveis CSS (--cor-destaque) centralizam as cores. Mudar a identidade visual vira trocar uma linha.
• box-sizing: border-box faz a largura incluir bordas e espaçamento interno, evitando surpresas.
• Flexbox (display: flex) organiza elementos em uma linha ou coluna.
• Grid com auto-fit e minmax cria uma grade que se ajusta sozinha: várias colunas no computador e uma no celular, sem precisar de media queries.

Responsividade

Teste sempre no celular. Nas ferramentas de desenvolvedor do navegador (F12), o ícone de celular simula telas menores. Quando precisar de ajustes específicos, use media queries:

@media (max-width: 600px) {
  .hero { padding: 32px 0; }
  h1 { font-size: 28px; }
}

Publicando de graça

Com a página pronta, você pode publicá-la gratuitamente em serviços de hospedagem de sites estáticos. O passo a passo está em como publicar um site estático de graça. Versione o projeto com Git desde o início; veja Git e GitHub para iniciantes.

Próximos passos

1. Refaça a página com o seu conteúdo e as suas cores.
2. Otimize as imagens antes de publicar; veja fotos para o site.
3. Teste a velocidade com o PageSpeed Insights; veja Core Web Vitals.
4. Aprenda JavaScript para adicionar interatividade; veja JavaScript para iniciantes.

Perguntas frequentes