Mini-curso · HTML & CSS · 2h30

Seu primeiro
site no ar.

Um cartão de visita digital, publicado na internet, com endereço próprio — em uma tarde, sem saber programar.

TemaHTML & CSS
Duração2h30
Etapas07 práticas
NívelIniciante
Objetivos

O que você vai aprender.

Você vai sair com

  • Um site seu, publicado na internet, com endereço próprio.
  • Entendimento básico de HTML (o esqueleto do site).
  • Entendimento básico de CSS (o visual do site).
  • Confiança pra abrir um editor de código e mexer.

O que você NÃO precisa

  • Saber programar.
  • Ter computador potente.
  • Falar inglês.
  • Pagar nada por ferramenta.
Fundamentos

Como a web funciona.

  1. Seu navegador pede. Chrome, Safari, Firefox pedem o site pra um computador na internet — o “servidor”.
  2. O servidor responde. Manda de volta arquivos: HTML, CSS, imagens.
  3. O navegador monta. Junta tudo e desenha na sua tela.
LinguagemPra que serveAnalogia
HTMLConteúdo e estruturaEsqueleto da casa
CSSVisual (cor, posição)Pintura e decoração
JavaScriptInteraçãoEletricidade
Hoje

A gente mexe só com HTML e CSS. Dá pra fazer site profissional só com essas duas.

Setup · tudo gratuito

As três ferramentas.

01 · Editor

Visual Studio Code

Um bloco de notas melhorado, feito pra escrever código. Colore as palavras e avisa quando você erra.

code.visualstudio.com

02 · Navegador

O que você já usa

Chrome, Safari, Firefox, Edge — tanto faz. A gente abre o site dando dois cliques no arquivo HTML.

03 · Pasta

meu-site

Crie uma pasta chamada meu-site (na Área de Trabalho, fica fácil de achar). Tudo vai dentro dela.

Etapa 01 / 0701

HTML cru.

Ter uma página HTML funcionando no navegador, mesmo que ainda esteja feia.

Tempo~15 min
Arquivoindex.html
FicaFuncional, feio
Etapa 01 · HTML cru

HTML é uma linguagem de tags.

Cada tag é um pedaço de texto entre < e > que diz pro navegador o que aquele conteúdo é.

HTMLexemplo
<p>Este é um parágrafo.</p>

Quase toda tag funciona em par: uma pra abrir, uma pra fechar. O texto no meio é o conteúdo.

TagPra que serve
<h1> a <h3>Títulos
<p>Parágrafo
<a href>Link clicável
<img src>Imagem
<ul> + <li>Lista com itens
<div>Caixa genérica
<header> <section> <footer>Topo, conteúdo, fim
Etapa 01 · HTML cru

Estrutura mínima de toda página.

HTMLindex.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Título da aba</title>
</head>
<body>
  <!-- conteúdo visível -->
</body>
</html>
<!DOCTYPE html>
Avisa que é uma página HTML moderna.
<html lang="pt-BR">
Envolve tudo; lang diz o idioma.
<head>
Informações invisíveis pro navegador.
<meta charset>
Faz acentos e ç funcionarem.
<title>
Texto da aba do navegador.
<body>
O que aparece na tela.
Etapa 01 · HTML cru

Vamos lá: crie o index.html.

  1. Abra o VS Code.
  2. Vá em File → Open Folder e abra sua pasta meu-site.
  3. Vá em File → New File e salve como index.html.
  4. Cole a estrutura mínima do slide anterior.
  5. Abra o arquivo no navegador (dois cliques) e veja a aba mudar com o título.
Pronto

Você fez seu primeiro arquivo HTML.

Etapa 01 · HTML cru

Preencha o body — parte 1.

HTMLindex.html · <body> · 1/2
<header>
  <p>Cartão digital, 2026</p>
  <img src="https://placehold.co/300x300" alt="Sua foto">
  <h1>Seu Nome.</h1>
  <p>Sua Profissão</p>
  <p><a href="#contato">Entre em contato →</a></p>
</header>

<section>
  <h2>Sobre.</h2>
  <p>Um parágrafo curto sobre você.</p>
</section>

<section>
  <h2>O que eu ofereço.</h2>
  <ul><li><h3>Serviço 01</h3><p>Descrição.</p></li></ul>
</section>
Etapa 01 · HTML cru

Preencha o body — parte 2.

HTMLindex.html · <body> · 2/2
<section>
  <h2>Trabalhos.</h2>
  <ul><li>
    <img src="https://placehold.co/1200x800" alt="Trabalho 01">
    <h3>Trabalho · 01</h3>
    <p>Uma frase sobre o trabalho.</p>
  </li></ul>
</section>

<section id="contato">
  <h2>Contato.</h2>
  <p>E-mail: <a href="mailto:seu@email.com">seu@email.com</a></p>
</section>

<footer><p>© 2026, Seu Nome</p></footer>
Pronto. Você tem o esqueleto do site. Feio? Sim. Mas funciona.
Confira

No material baixado: etapas/v1-html-cru/.

Salve (Ctrl+S / Cmd+S) e atualize o navegador (F5).

Etapa 02 / 0702

Conectando
o CSS.

Dar cor, fonte e respiro à página.

Tempo~25 min
Arquivostyle.css
FicaCom cara
Etapa 02 · Conectando o CSS

CSS controla o visual.

Você escreve regras tipo “todo parágrafo tem texto cinza” ou “todo título usa a fonte tal”.

CSSestrutura de uma regra
seletor {
  propriedade: valor;
}

Exemplo:

CSSexemplo
p {
  color: red;
}

“Todo <p> da página tem cor vermelha.”

Etapa 02 · Conectando o CSS

Crie e conecte o style.css.

Estruturameu-site/
meu-site/
├── index.html
└── assets/
    └── css/
        └── style.css
  1. Crie a pasta assets, e dentro dela css.
  2. Dentro de css, crie style.css.

No <head> do index.html, adicione:

HTMLindex.html · <head>
<link rel="stylesheet" href="assets/css/style.css">
Etapa 02 · Conectando o CSS

Importe as fontes do Google.

Ainda no <head>, uma família por linha:

HTMLindex.html · <head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap">

São 3 famílias: Plus Jakarta Sans (títulos), Inter (texto), JetBrains Mono (rótulos).

Etapa 02 · Conectando o CSS

O CSS básico.

CSSstyle.css
/* variáveis: cores e fontes num lugar só */
:root {
  --paper:  #ece6db;
  --ink:    #1c1a17;
  --accent: #7a2018;
  --font-text: 'Inter', sans-serif;
}

/* reset básico */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-text);
  color: var(--ink);
  background-color: var(--paper);
}
Variáveis são o coração do CSS moderno: define a cor uma vez, usa em 50 lugares.

Salve e atualize. A página ganha fundo cor de papel, texto escuro e fontes bonitas — ainda em coluna.

Etapa 03 / 0703

Cabeçalho
e Sobre.

Transformar o cabeçalho (hero) e a seção Sobre em algo profissional.

Tempo~30 min
FocoClasses & flex
FicaProfissional
Etapa 03 · Cabeçalho e Sobre

Classes.

Classe é uma etiqueta que você põe num elemento pra dar um nome a ele e poder estilizar.

HTMLno HTML
<header class="hero">
  ...
</header>
CSSno CSS — ponto antes do nome
.hero {
  background-color: var(--ink);
}
Etapa 03 · Cabeçalho e Sobre

Helpers reutilizáveis.

CSSstyle.css · helpers
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
max-width + margin: 0 auto
Limita a largura e centraliza o conteúdo.
text-transform: uppercase
Deixa o texto todo MAIÚSCULO.
letter-spacing
Espaça as letras — fica elegante em rótulos.
Etapa 03 · Cabeçalho e Sobre

O HTML do cabeçalho.

HTMLindex.html · <header>
<header class="hero">
  <div class="container">
    <img class="avatar" src="..." alt="Sua foto">
    <h1>Seu Nome<span class="dot">.</span></h1>
    <p class="role">Sua Profissão</p>
    <div class="hero-meta"> ... </div>
    <a class="cta" href="#contato">Entre em contato →</a>
  </div>
</header>
Etapa 03 · Cabeçalho e Sobre

O CSS do cabeçalho.

CSSstyle.css · hero
.hero {
  background-color: var(--ink);
  color: var(--paper);
  padding: 80px 0 100px;
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.cta:hover { background-color: var(--accent-2); }
display: flex
Põe os filhos lado a lado.
justify-content
Empurra os filhos pras pontas.
border-radius: 50%
Transforma quadrado em círculo.
:hover
Estilo quando o mouse passa por cima.
Etapa 03 · Cabeçalho e Sobre

A seção Sobre.

CSSstyle.css · block
.block {
  padding: 80px 0;
  border-bottom: 1px solid rgba(28,26,23,.12);
}
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.lead {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 56ch;
}
Conceito

max-width: 56ch limita o parágrafo a ~56 caracteres — leitura confortável.

Confira

No material baixado: etapas/v3-hero-e-sobre/.

Etapa 04 / 0704

Serviços,
Trabalhos
e Contato.

Montar as três seções de conteúdo com flexbox e grid.

Tempo~35 min
FocoFlex & Grid
FicaCompleto
Etapa 04 · Serviços e Contato

Serviços com flexbox.

CSSstyle.css · services
.services li {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid rgba(28,26,23,.15);
  align-items: flex-start;
}
.svc-num {
  font-family: var(--font-mono);
  min-width: 50px;
}

Cada serviço é um <li> com flex horizontal: número à esquerda, conteúdo à direita, com uma linha separadora em cima.

list-style: none
Tira as bolinhas da lista.
gap
Espaço entre o número e o texto.
Etapa 04 · Serviços e Contato

CSS Grid e a galeria.

display: grid cria uma grade — você diz quantas colunas quer e o navegador organiza.

CSSgrid · 3 colunas
.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
}
HTMLindex.html · trabalhos
<div class="works">
  <div class="work">
    <img src="..." alt="Trabalho 01">
    <h3>Trabalho · 01</h3>
    <p class="work-desc">Uma frase sobre o trabalho.</p>
    <div class="work-meta"><span>Ver detalhes →</span></div>
  </div>
  <!-- repete pros outros -->
</div>
Etapa 04 · Serviços e Contato

O CSS dos cards da galeria.

CSSstyle.css · works
.work img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.4s;
}
.work:hover img { transform: scale(1.02); }
aspect-ratio: 3 / 2
Mantém a proporção da imagem, qualquer que seja o arquivo.
object-fit: cover
Corta a imagem pra preencher sem distorcer.
transform: scale(1.02)
Aumenta a imagem em 2% no hover.
Etapa 04 · Serviços e Contato

Bloco de contato.

CSSstyle.css · contact
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.socials a {
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.socials a:hover { color: var(--accent); }

Contato em grade 2×2 (telefone, e-mail, etc.) mais uma linha de redes sociais com flexbox.

Confira

No material baixado: etapas/v4-galeria-e-contato/.

Etapa 05 / 0705

Páginas
de detalhe.

Criar uma 2ª página e ligar uma na outra com links.

Tempo~15 min
ConceitoLinks entre páginas
FicaSite com várias páginas
Etapa 05 · Páginas de detalhe

Um site pode ter várias páginas.

Cada página é um arquivo .html separado, na mesma pasta. Pra ir de uma pra outra, o link aponta pro nome do arquivo — como o #contato, mas agora pra outro arquivo.

href="trabalho-1.html"
Abre outra página do seu site.
href="index.html"
Volta pra página inicial.
HTMLindex.html · card do trabalho
<!-- o card inteiro vira um link pra página de detalhe -->
<a class="work" href="trabalho-1.html">
  <img src="..." alt="Trabalho 01">
  <h3>Trabalho · 01</h3>
  <p class="work-desc">Uma frase sobre o trabalho.</p>
  <div class="work-meta"><span>Ver detalhes →</span></div>
</a>
Etapa 05 · Páginas de detalhe

A página de detalhe.

HTMLtrabalho-1.html
<main class="block">
  <div class="container">
    <a class="back" href="index.html#trabalhos">← Voltar</a>
    <div class="detail">
      <img class="detail-img" src="..." alt="...">
      <div class="detail-info">
        <h1>Trabalho · 01</h1>
        <p class="lead">Descrição do trabalho.</p>
      </div>
    </div>
  </div>
</main>

Uma página nova, mesma estrutura: imagem de um lado, texto do outro, e um "← Voltar" que leva de volta pro index.

Repita

Copie pra trabalho-2.html, troque imagem e texto, e ligue o próximo card. Pronto — site com várias páginas.

Etapa 06 / 0706

Polimento
e celular.

Fazer o site funcionar bem no celular.

Tempo~15 min
ConceitoMedia query
FicaResponsivo
Etapa 06 · Polimento e celular

Media query.

Um jeito de dizer pro CSS: “estas regras só valem em tela menor que tantos pixels”.

1fr
“Uma fração” — a coluna ocupa tudo.
sobrescreve
O resto do estilo desktop continua valendo; a media query só ajusta o que precisa.
CSSstyle.css · responsivo
@media (max-width: 720px) {
  .hero h1 { font-size: 48px; }

  /* galeria vira coluna única */
  .works { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
Etapa 07 / 0707

Publicando
seu site.

Colocar seu site no ar com um endereço público — via Netlify Drop.

Tempo~15 min
ServiçoNetlify Drop
CustoR$ 0,00
Etapa 07 · Publicando

Publicar no Netlify Drop.

Netlify hospeda sites estáticos de graça. O “Drop” publica arrastando uma pasta — sem conta, sem instalar nada.

  1. Abra app.netlify.com/drop.
  2. Abra a pasta onde está seu meu-site.
  3. Arraste a pasta inteira pra cima da área cinza.
  4. Espere de 5 a 30 segundos.
  5. Pronto: endereço tipo nome.netlify.app.
Etapa 07 · Publicando

Endereço e atualização.

Esse endereço é público. Manda no zap da sua mãe.

Mudar o endereço: no painel do Netlify, Site settings → Change site name (ex: ana-lima.netlify.app).

Atualizar: mudou algo? Arrasta a pasta de novo. Ele substitui a versão antiga.

Domínio próprio

Quer algo como seunome.com.br? Compre o domínio (Registro.br, ~R$ 40/ano) e aponte no Netlify. Assunto pra depois.

Você acabou de fazer sozinho, do zero, o que muita gente contrata pronto.
Próximos passos

Se você curtiu e quer ir além.

01 · Aprender mais

HTML & CSS

MDN Web Docs (pt-BR) — a referência mais confiável.

Origamid — cursos gratuitos no YouTube.

freeCodeCamp — currículo completo.

02 · Expandir

Seu site

Mais páginas: crie outros .html e ligue com <a>.

Formulário: Netlify Forms (gratuito).

Animações: estude @keyframes.

03 · Próxima linguagem

JavaScript

Pra botões que fazem coisa: abrir menu, mudar tema, validar formulário.

Comece pelo básico: variáveis, funções e como mexer no HTML pelo JS.

Fim · valeu, turma

Agora é com
vocês.

Manda o link do seu site no ar. Quero ver o que vocês fizeram.

talkto@theleoad.com · @theleoad

1 / 33