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

> HTML descreve o conteúdo da página e CSS define como ele aparece. Veja os conceitos segundo o MDN, uma página de currículo completa que a Redação testou em tela larga e em tela de celular, como usar Flexbox, Grid e responsividade e como publicar de graça no GitHub Pages, com vídeos em português verificados.

- Editoria: Carreira
- Autor: Redação PushTech
- Publicado em: 2026-10-24T21:34:00-03:00
- URL canônica: https://pushtech.tech/carreira/html-e-css-como-criar-e-publicar-sua-primeira-pagina-de-verdade

**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](/carreira/quero-virar-dev-em-casa-por-onde-comecar-de-verdade-com-plano-de-30-dias) e [lógica de programação](/carreira/logica-de-programacao-a-habilidade-que-vem-antes-da-linguagem-com-exercicios).

## 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**:

```html
<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:

```css
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`**

```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`**

```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.

_Vídeo: Seu primeiro código HTML - Curso em Vídeo HTML5 e CSS3 (Curso em Vídeo)_

_Vídeo: Primeiros passos com Flexbox CSS - Curso em Vídeo HTML5 + CSS3 (Curso em Vídeo)_

_Vídeo: Aprenda HTML e CSS em 40 Minutos - Tutorial para Iniciantes (Gustavo Campelo - Desenvolvedor)_

_Vídeo: CSS Full Course - Includes Flexbox and CSS Grid Tutorials (freeCodeCamp.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](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax), MDN Web Docs (Mozilla)
- [What is CSS?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS), MDN Web Docs (Mozilla)
- [Flexbox](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox), MDN Web Docs (Mozilla)
- [Grids](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids), MDN Web Docs (Mozilla)
- [Responsive design](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_design), MDN Web Docs (Mozilla)
- [Quickstart for GitHub Pages](https://docs.github.com/en/pages/quickstart), GitHub Docs
- [GitHub Pages limits](https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits), GitHub Docs