HTML e CSS: como criar e publicar sua primeira página de verdade, passo a passo

HTML descreve o que há na página (títulos, parágrafos, listas, links) e CSS define como isso aparece (cores, espaçamento, posição). Este é o terceiro artigo da trilha "Quero virar dev em casa", e ele termina com uma página de currículo sua, publicada de graça na internet. Se você ainda não leu, veja antes por onde começar e lógica de programação.

Para quem é este artigo

Para quem nunca escreveu uma página web. Pré-requisitos: um editor de código e uma conta no GitHub (o artigo 1 explica as duas coisas). Tempo de estudo sugerido: de 6 a 10 horas ao longo de duas semanas, entre leitura, vídeos e prática (estimativa da Redação).

O que você vai aprender

1. O que são HTML e CSS e como se encaixam.
2. A estrutura de uma página e as tags essenciais.
3. Estilos, Flexbox, Grid e responsividade.
4. Como publicar no GitHub Pages.
5. Um mini-projeto: seu currículo online.

O que é HTML

Segundo o MDN, o HTML "consiste em uma série de elementos" que você usa para envolver partes do conteúdo e fazê-las aparecer ou se comportar de certa forma. Um elemento tem tag de abertura, conteúdo e tag de fechamento:

<p>Meu gato está muito mal-humorado</p>

Aqui, <p> abre o elemento, o texto é o conteúdo e </p> fecha. Três ideias do MDN valem desde já:

• Atributos trazem informação extra sobre o elemento que não faz parte do conteúdo, como o endereço de uma imagem: <img src="foto.jpg" alt="Foto de perfil" />.
• Aninhamento: elementos podem ficar dentro de outros, mas as tags precisam abrir e fechar "dentro ou fora uma da outra", sem se cruzar. O correto é <p>Meu gato é <strong>muito</strong> mal-humorado.</p>.
• Elementos vazios têm uma só tag e não contêm outro conteúdo, como <br /> (quebra de linha) e <img />.

O que é CSS

Segundo o MDN, o CSS ("folhas de estilo em cascata") é uma linguagem baseada em regras. O HTML não define aparência: os estilos padrão vêm de folhas de estilo do próprio navegador, e o CSS os sobrescreve. Uma regra tem um seletor (que elementos estilizar) e declarações entre chaves, em pares propriedade e valor:

h1 {
  color: red;
  font-size: 2.5em;
}

O MDN diz que as regras podem ficar no próprio HTML ou em arquivos .css externos. Para começar, use um arquivo externo, como no exemplo abaixo.

A página completa: um currículo online

Esta é uma página inteira, escrita e testada pela Redação. Crie uma pasta, salve o primeiro bloco como index.html e o segundo como estilo.css, e abra o index.html no navegador.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Seu Nome | Currículo</title>
  <link rel="stylesheet" href="estilo.css" />
</head>
<body>
  <header class="topo">
    <h1>Seu Nome</h1>
    <nav>
      <a href="#sobre">Sobre</a>
      <a href="#habilidades">Habilidades</a>
      <a href="#projetos">Projetos</a>
      <a href="#contato">Contato</a>
    </nav>
  </header>

  <main>
    <section id="sobre">
      <h2>Sobre mim</h2>
      <p>Estou aprendendo programação em casa. Hoje estudo HTML, CSS e JavaScript e publico o que construo.</p>
    </section>

    <section id="habilidades">
      <h2>Habilidades</h2>
      <ul class="cartoes">
        <li>HTML</li>
        <li>CSS</li>
        <li>Git e GitHub</li>
      </ul>
    </section>

    <section id="projetos">
      <h2>Projetos</h2>
      <p>Esta página é o meu primeiro projeto publicado.</p>
    </section>

    <section id="contato">
      <h2>Contato</h2>
      <p><a href="https://github.com/seu-usuario">GitHub</a> · <a href="https://www.linkedin.com/in/seu-usuario">LinkedIn</a></p>
    </section>
  </main>
</body>
</html>

estilo.css

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2933;
  background: #f5f7fa;
}

.topo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: #102a43;
  color: white;
}

.topo h1 { margin: 0; font-size: 1.5rem; }
.topo nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.topo a { color: #9fb3c8; text-decoration: none; }
.topo a:hover { color: white; }

main { max-width: 48rem; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
h2 { color: #102a43; }

.cartoes {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.cartoes li {
  padding: 1rem;
  border-radius: 0.5rem;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  text-align: center;
}

@media (width >= 40rem) {
  .topo { flex-direction: row; justify-content: space-between; align-items: center; }
  .cartoes { grid-template-columns: repeat(3, 1fr); }
}

Como a Redação testou: abriu a página no Chrome em tela larga e em um quadro de 375 pixels de largura, que simula um celular. No quadro estreito, o menu fica abaixo do nome e as três habilidades ficam uma sob a outra. Na tela larga, o menu vai para a direita e as habilidades aparecem em três colunas. É a captura que ilustra esta matéria. Não foi testado em outros navegadores nem em celulares reais.

O que cada parte faz

• <!DOCTYPE html> e <html lang="pt-BR">: declaram que é uma página HTML e que o idioma é o português do Brasil.
• <head>: informações sobre a página (título da aba, codificação, ligação com o CSS). <body>: o que aparece na tela.
• <header>, <nav>, <main>, <section>: elementos que dão significado à estrutura, em vez de uma pilha de blocos sem nome.
• <h1> e <h2>: títulos, do mais importante ao menos importante. Use um <h1> por página.
• <ul> e <li>: lista e itens. <a href>: link.
• class="topo": um nome que você dá a um elemento para estilizá-lo pelo CSS, com .topo.

Flexbox, Grid e responsividade

Flexbox: itens em linha ou em coluna

Segundo o MDN, o Flexbox é um método de layout unidimensional, que organiza itens em linhas ou colunas e os faz crescer ou encolher conforme o espaço. Basta usar display: flex no elemento pai para ele virar um contêiner flex. O flex-direction define a direção do eixo principal (padrão row, e column empilha). No exemplo, o cabeçalho usa flex-direction: column no celular e row na tela larga.

Grid: linhas e colunas ao mesmo tempo

O MDN descreve o CSS Grid como um sistema de layout bidimensional, que organiza o conteúdo em linhas e colunas. Com display: grid, o resultado é uma única coluna, e você acrescenta colunas com grid-template-columns. A unidade fr representa uma fração do espaço disponível: repeat(3, 1fr), no exemplo, cria três colunas iguais.

Regra prática (da Redação): use Flexbox quando os itens vão em uma direção (um menu, uma fileira de botões) e Grid quando precisar de linhas e colunas (uma grade de cartões).

Responsividade: a página precisa servir ao celular

O MDN define design responsivo como uma abordagem para que as páginas fiquem boas em todos os tamanhos de tela, e não como uma tecnologia separada. Três pontos:

1. Sempre inclua a meta tag viewport no <head>, como no exemplo: <meta name="viewport" content="width=device-width" />. O MDN explica que navegadores de celular tendem a "mentir" sobre a largura da tela, e sem a tag a página pode ser desenhada em uma largura padrão maior, fazendo os pontos de quebra não funcionarem.
2. Media queries aplicam CSS só quando uma condição é verdadeira, como @media (width >= 40rem). Os pontos em que o layout muda são os pontos de quebra, e o MDN recomenda defini-los com unidades relativas, como rem.
3. Mobile first: comece pelo layout simples de uma coluna, para telas estreitas, e só então acrescente as regras para telas largas. É o que a página de exemplo faz.

Como publicar no GitHub Pages

Segundo o guia rápido do GitHub:

1. Crie um repositório chamado seu-usuario.github.io, com seu-usuario igual ao seu nome de usuário no GitHub, e marque a opção Add README.
2. Coloque seus arquivos (index.html e estilo.css) no repositório. Dá para enviá-los pela própria interface do GitHub; no artigo sobre Git e GitHub, mais adiante na trilha, você aprenderá a fazer isso pelo terminal. O nome index.html para a página de entrada é uma prática comum; consulte o guia oficial em caso de dúvida.
3. Em Settings, abra Pages. Em Build and deployment, escolha Source: Deploy from a branch e selecione a branch.
4. Aguarde. O guia avisa que as mudanças podem levar até 10 minutos para aparecer.
5. Abra https://seu-usuario.github.io e confira.

Limites (página oficial): o site publicado pode ter até 1 GB, há um teto de tráfego de 100 GB por mês (não imposto de forma rígida) e cerca de 10 publicações por hora. O GitHub Pages não é permitido como hospedagem gratuita para rodar um negócio, o que não afeta uma página pessoal. Não publique dados sensíveis, como telefone pessoal ou documentos, em um currículo aberto.

Vídeos para estudar

Os quatro vídeos foram verificados quanto ao título, ao canal, à duração, à data e à possibilidade de incorporação. A Redação não os assistiu na íntegra nem verificou o que dizem.

Seu primeiro código HTML - Curso em Vídeo HTML5 e CSS3Curso em Vídeo

Primeiros passos com Flexbox CSS - Curso em Vídeo HTML5 + CSS3Curso em Vídeo

Aprenda HTML e CSS em 40 Minutos - Tutorial para IniciantesGustavo Campelo - Desenvolvedor

CSS Full Course - Includes Flexbox and CSS Grid TutorialsfreeCodeCamp.org

Exercícios práticos

1. Troque as cores. Mude as cores do cabeçalho e dos cartões no estilo.css e veja o resultado.
2. Mais uma seção. Acrescente uma seção "Formação" no HTML, com uma lista, e estilize-a.
3. Uma imagem. Adicione uma foto ou avatar com <img>, usando o atributo alt para descrevê-la. Evite usar a foto de outra pessoa.
4. Quebra diferente. Mude o ponto de quebra de 40rem para 60rem e observe o que acontece.
5. Quatro cartões. Acrescente uma quarta habilidade e ajuste o Grid para 2 colunas em telas médias.

Mini-projeto: seu currículo online

Crie a sua versão da página com:

• Seu nome e uma foto ou avatar.
• Um parágrafo "Sobre mim".
• Suas habilidades, em cartões.
• Seus projetos (por enquanto, a própria página).
• Contato e links para GitHub e LinkedIn.

Publique no GitHub Pages seguindo o passo a passo acima. Resultado esperado: sua primeira página publicada, com endereço que você pode colocar no LinkedIn.

Erros comuns de iniciantes

• Esquecer de fechar uma tag. O sintoma é o layout "quebrando" lá embaixo.
• Cruzar tags: <p><strong>texto</p></strong> está errado; feche na ordem inversa.
• Esquecer a meta tag viewport. Sem ela, a página fica minúscula no celular.
• Erro de caminho no CSS. Se o estilo.css não está na mesma pasta, o href não o encontra.
• Usar títulos só pelo tamanho da letra. Use <h1>, <h2> pela estrutura, e ajuste o tamanho no CSS.
• Esquecer o alt da imagem. Ele descreve a imagem para quem não a vê.
• Mexer em tudo ao mesmo tempo. Mude uma coisa, recarregue e veja.

Checklist de conclusão

• Escrevi uma página com <header>, <main> e pelo menos três seções.
• Liguei um arquivo .css externo.
• Usei Flexbox e Grid, e sei dizer quando usar cada um.
• Incluí a meta tag viewport e uma media query.
• Abri a página em tela larga e estreita.
• Publiquei no GitHub Pages e abri o endereço.
• Não publiquei dados pessoais sensíveis.

Próximo passo da trilha

Com a página no ar, o próximo artigo ensina JavaScript, a linguagem que faz a página reagir ao que o usuário faz. Você vai acrescentar interação a este mesmo currículo.

Perguntas frequentes

O que é HTML?

É a linguagem que descreve o conteúdo e a estrutura de uma página, por meio de elementos com tags de abertura e de fechamento, como <p> e </p>.

O que é CSS?

É a linguagem de regras que define a aparência da página, como cores, fontes e posição. Cada regra tem um seletor e declarações com propriedade e valor.

HTML e CSS são linguagens de programação?

O HTML descreve conteúdo, e o CSS descreve aparência, e nenhum dos dois tem a lógica de decisão e repetição que as linguagens de programação têm. Muita gente os considera a porta de entrada para a programação web. A divisão é uma observação da Redação.

Qual a diferença entre Flexbox e Grid?

Segundo o MDN, o Flexbox é unidimensional (itens em linha ou coluna) e o Grid é bidimensional (linhas e colunas ao mesmo tempo).

Por que preciso da meta tag viewport?

Segundo o MDN, navegadores de celular tendem a informar uma largura maior que a real, e sem a tag a página pode ser desenhada em uma largura padrão, fazendo os pontos de quebra não funcionarem como o esperado.

Como publicar uma página de graça?

Pelo GitHub Pages: crie um repositório seu-usuario.github.io, envie os arquivos, escolha a opção de publicar a partir de uma branch em Settings > Pages e aguarde até 10 minutos.

Posso colocar um site de vendas no GitHub Pages?

Não. A página oficial diz que o serviço não é permitido como hospedagem gratuita para rodar um negócio, o que exclui lojas virtuais.

Fontes

• Basic HTML syntax, MDN Web Docs (Mozilla)
• What is CSS?, MDN Web Docs (Mozilla)
• Flexbox, MDN Web Docs (Mozilla)
• Grids, MDN Web Docs (Mozilla)
• Responsive design, MDN Web Docs (Mozilla)
• Quickstart for GitHub Pages, GitHub Docs
• GitHub Pages limits, GitHub Docs