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.

Seu navegador pede. Chrome, Safari, Firefox pedem o site pra um computador na internet — o “servidor”.
O servidor responde. Manda de volta arquivos: HTML, CSS, imagens.
O navegador monta. Junta tudo e desenha na sua tela.

Linguagem	Pra que serve	Analogia
HTML	Conteúdo e estrutura	Esqueleto da casa
CSS	Visual (cor, posição)	Pintura e decoração
JavaScript	Interação	Eletricidade

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.

Tag	Pra 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.

Cole aqui Crie o arquivo index.html e cole esta estrutura inteira:

HTMLindex.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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.

<meta name="viewport">

Faz a página se adaptar à largura do celular (essencial pro responsivo).

<title>

Texto da aba do navegador.

<body>

O que aparece na tela.

Etapa 01 · HTML cru

Vamos lá: crie o index.html.

Abra o VS Code.
Vá em File → Open Folder e abra sua pasta meu-site.
Vá em File → New File e salve como index.html.
Cole a estrutura mínima do slide anterior.
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.

Cole aqui Dentro do <body>, no lugar do comentário :

HTMLindex.html · <body> · 1/2

<!-- ↓↓↓  COLE ISTO DENTRO DO <body>, no lugar do comentário "conteúdo visível"  ↓↓↓ -->

  <!-- ===========================================================
       CABEÇALHO
       A tag <header> marca o topo do site. Aqui dentro vai a
       foto, o nome, a profissão, dados rápidos e botão de contato.
       =========================================================== -->
  <header>

    <p>Cartão digital, 2026</p>

    <!-- <img> insere uma imagem. "src" é o endereço da imagem.
         "alt" é a descrição (importante quando a imagem não carrega). -->
    <img src="https://placehold.co/300x300/2b2925/ece6db/png?text=Ana" alt="Foto de perfil de Ana Lima">

    <!-- <h1> é o título mais importante da página (só um por página). -->
    <h1>Ana Lima.</h1>

    <p>Profissional Multidisciplinar</p>

    <!-- <div> é uma caixa genérica, sem significado específico.
         Serve pra agrupar coisas que vão juntas. -->
    <div>
      <p>Baseado em: São Paulo, BR</p>
      <p>Foco: Projetos, consultoria, acompanhamento</p>
      <p>Idiomas: PT, EN</p>
    </div>

    <!-- <a> é um link. O href diz pra onde ele vai. -->
    <p><a href="#contato">Entre em contato →</a></p>

    <!-- <blockquote> marca uma citação (frase de outra pessoa). -->
    <blockquote>
      "É fazendo que se aprende a fazer aquilo que se deve aprender a fazer."
      — Aristóteles
    </blockquote>

  </header>

  <!-- ===========================================================
       01 SOBRE
       <section> separa um pedaço de conteúdo da página.
       =========================================================== -->
  <section>

    <!-- <h2> é título de segundo nível (vem dentro de uma seção). -->
    <h2>Trabalho que conecta ideias, pessoas e resultado.</h2>

    <p>
      Atendo profissionais e pequenos negócios que precisam de clareza
      pra começar e ritmo pra manter projetos vivos. Cada projeto começa
      por entender quem você é, o que quer fazer e quanto tempo tem.
    </p>

    <p>
      Desde quem está lançando o primeiro serviço até quem precisa de
      apoio constante, atendo com escopo claro, prazos honestos e
      processo transparente.
    </p>

  </section>

  <!-- ===========================================================
       02 SERVIÇOS
       <ul> é uma lista. Cada item vai dentro de <li>.
       =========================================================== -->
  <section>

    <h2>O que eu ofereço.</h2>

    <ul>
      <li>
        <h3>Atendimento personalizado</h3>
        <p>Cada cliente recebe uma proposta feita do zero, conversando antes de qualquer coisa.</p>
      </li>
      <li>
        <h3>Consultoria de projetos</h3>
        <p>Te ajudo a estruturar o que você quer fazer, do plano ao primeiro passo concreto.</p>
      </li>
      <li>
        <h3>Execução completa</h3>
        <p>Faço o trabalho de ponta a ponta, com você acompanhando cada etapa do processo.</p>
      </li>
      <li>
        <h3>Acompanhamento contínuo</h3>
        <p>Apoio mensal pra quem precisa de alguém constante, não só de um trabalho pontual.</p>
      </li>
      <li>
        <h3>Mentoria 1:1</h3>
        <p>Sessões individuais pra você desenvolver suas próprias habilidades e ganhar autonomia.</p>
      </li>
      <li>
        <h3>Plantão de dúvidas</h3>
        <p>Suporte rápido quando você precisa de uma segunda opinião na hora certa.</p>
      </li>
    </ul>

  </section>

Etapa 01 · HTML cru

Preencha o body — parte 2.

Cole aqui Logo abaixo, ainda dentro do <body> (depois do que você colou):

HTMLindex.html · <body> · 2/2

<!-- ↓↓↓  CONTINUE colando dentro do <body>, logo abaixo do que você já colou  ↓↓↓ -->

<!-- ===========================================================
       03 TRABALHOS
       =========================================================== -->
  <section>

    <h2>Alguns trabalhos.</h2>

    <ul>
      <li>
        <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=01" alt="Capa do Trabalho 01">
        <h3>Trabalho · 01</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
      </li>
      <li>
        <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=02" alt="Capa do Trabalho 02">
        <h3>Trabalho · 02</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
      </li>
      <li>
        <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=03" alt="Capa do Trabalho 03">
        <h3>Trabalho · 03</h3>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.</p>
      </li>
      <li>
        <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=04" alt="Capa do Trabalho 04">
        <h3>Trabalho · 04</h3>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
      </li>
      <li>
        <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=05" alt="Capa do Trabalho 05">
        <h3>Trabalho · 05</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </li>
      <li>
        <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=06" alt="Capa do Trabalho 06">
        <h3>Trabalho · 06</h3>
        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.</p>
      </li>
    </ul>

  </section>

  <!-- ===========================================================
       04 CONTATO
       =========================================================== -->
  <section id="contato">

    <h2>Contato.</h2>

    <div>
      <p>Telefone: <a href="tel:+5511999999999">+55 11 99999-9999</a></p>
      <p>E-mail: <a href="mailto:contato@analima.com.br">contato@analima.com.br</a></p>
      <p>Endereço: São Paulo, SP, Brasil</p>
      <p>Atendimento: Seg a Sex, 09h às 18h</p>
    </div>

    <!-- Lista das redes sociais. -->
    <ul>
      <li><a href="#">Instagram</a></li>
      <li><a href="#">LinkedIn</a></li>
      <li><a href="#">WhatsApp</a></li>
      <li><a href="#">GitHub</a></li>
    </ul>

  </section>

  <!-- ===========================================================
       RODAPÉ
       <footer> marca o fim do site.
       =========================================================== -->
  <footer>
    <p>© 2026, Ana Lima</p>
  </footer>

Confira

Salve (Ctrl+S) e atualize o navegador (F5). Site feio, mas funcionando. No material: etapas/v1-html-cru/.

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

Crie a pasta assets, e dentro dela css.
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

Vista o HTML com classes.

Substitua Troque TODO o seu <body> … </body> por este — mesmo conteúdo, agora com as classes que o CSS vai usar:

HTMLindex.html · <body>

<!-- ↓↓↓  SUBSTITUA todo o seu <body> ... </body> por isto (agora com classes)  ↓↓↓ -->

<body>

  <!-- ================================================
       HERO — o "cartão" no topo
       Apresentação principal: marca, foto, nome, função,
       dados rápidos, botão de ação e citação.
       ================================================ -->
  <header class="hero">
    <div class="container">

      <!-- Linha de cima do cabeçalho: contexto à esquerda
           e símbolo (mark) à direita, com a inicial do nome. -->
      <div class="hero-top">
        <span class="label">Cartão digital, 2026</span>
        <span class="mark">A</span>
      </div>

      <!-- Foto de perfil. Para trocar, salve sua foto em
           assets/img/ (ex: foto.jpg) e troque o src abaixo. -->
      <img class="avatar" src="https://placehold.co/300x300/2b2925/ece6db/png?text=Ana" alt="Foto de perfil de Ana Lima">

      <!-- Nome principal. O ponto (.dot) ganha cor de destaque. -->
      <h1>Ana Lima<span class="dot">.</span></h1>

      <!-- Linha de "função" / cargo, em letras pequenas. -->
      <p class="role">Profissional Multidisciplinar</p>

      <!-- Metadados rápidos: 3 informações que dão contexto
           antes do visitante rolar a página. -->
      <div class="hero-meta">
        <div>
          <span class="label">Baseado em</span>
          <strong>São Paulo, BR</strong>
        </div>
        <div>
          <span class="label">Foco</span>
          <strong>Projetos, consultoria, acompanhamento</strong>
        </div>
        <div>
          <span class="label">Idiomas</span>
          <strong>PT, EN</strong>
        </div>
      </div>

      <!-- Botão de ação (CTA) — leva direto pra seção de contato. -->
      <a class="cta" href="#contato">Entre em contato →</a>

      <!-- Citação curta de assinatura no fim do hero. -->
      <p class="thought">"É fazendo que se aprende a fazer aquilo que se deve aprender a fazer." <span>Aristóteles</span></p>

    </div>
  </header>

  <!-- ================================================
       01 SOBRE
       ================================================ -->
  <section class="block" id="sobre">
    <div class="container">
      <div class="block-head">
        <h2>Trabalho que conecta ideias, pessoas e resultado.</h2>
        <span class="num">01 / 04</span>
      </div>

      <p class="lead">
        Atendo profissionais e pequenos negócios que precisam de clareza
        pra começar e ritmo pra manter projetos vivos. Cada projeto começa
        por entender quem você é, o que quer fazer e quanto tempo tem.
      </p>

      <p class="lead">
        Desde quem está lançando o primeiro serviço até quem precisa de
        apoio constante, atendo com escopo claro, prazos honestos e
        processo transparente.
      </p>
    </div>
  </section>

  <!-- ================================================
       02 SERVIÇOS
       Lista numerada de serviços oferecidos.
       Para adicionar/remover um serviço, copie ou apague
       um bloco <li> inteiro.
       ================================================ -->
  <section class="block" id="servicos">
    <div class="container">
      <div class="block-head">
        <h2>O que eu ofereço.</h2>
        <span class="num">02 / 04</span>
      </div>

      <ul class="services">
        <li>
          <span class="svc-num">→ 01</span>
          <div>
            <h3>Atendimento personalizado</h3>
            <p>Cada cliente recebe uma proposta feita do zero, conversando antes de qualquer coisa.</p>
          </div>
        </li>
        <li>
          <span class="svc-num">→ 02</span>
          <div>
            <h3>Consultoria de projetos</h3>
            <p>Te ajudo a estruturar o que você quer fazer, do plano ao primeiro passo concreto.</p>
          </div>
        </li>
        <li>
          <span class="svc-num">→ 03</span>
          <div>
            <h3>Execução completa</h3>
            <p>Faço o trabalho de ponta a ponta, com você acompanhando cada etapa do processo.</p>
          </div>
        </li>
        <li>
          <span class="svc-num">→ 04</span>
          <div>
            <h3>Acompanhamento contínuo</h3>
            <p>Apoio mensal pra quem precisa de alguém constante, não só de um trabalho pontual.</p>
          </div>
        </li>
        <li>
          <span class="svc-num">→ 05</span>
          <div>
            <h3>Mentoria 1:1</h3>
            <p>Sessões individuais pra você desenvolver suas próprias habilidades e ganhar autonomia.</p>
          </div>
        </li>
        <li>
          <span class="svc-num">→ 06</span>
          <div>
            <h3>Plantão de dúvidas</h3>
            <p>Suporte rápido quando você precisa de uma segunda opinião na hora certa.</p>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <!-- ================================================
       03 TRABALHOS — galeria de projetos
       Cada <div class="work"> é UM projeto.
       Galeria usa CSS Grid de 3 colunas (vira 1 no celular).
       ================================================ -->
  <section class="block" id="trabalhos">
    <div class="container">
      <div class="block-head">
        <h2>Alguns trabalhos.</h2>
        <span class="num">03 / 04</span>
      </div>

      <div class="works">

        <div class="work">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=01" alt="Capa do Trabalho 01">
          <h3>Trabalho · 01</h3>
          <p class="work-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </div>

        <div class="work">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=02" alt="Capa do Trabalho 02">
          <h3>Trabalho · 02</h3>
          <p class="work-desc">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </div>

        <div class="work">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=03" alt="Capa do Trabalho 03">
          <h3>Trabalho · 03</h3>
          <p class="work-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </div>

        <div class="work">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=04" alt="Capa do Trabalho 04">
          <h3>Trabalho · 04</h3>
          <p class="work-desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </div>

        <div class="work">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=05" alt="Capa do Trabalho 05">
          <h3>Trabalho · 05</h3>
          <p class="work-desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </div>

        <div class="work">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=06" alt="Capa do Trabalho 06">
          <h3>Trabalho · 06</h3>
          <p class="work-desc">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- ================================================
       04 CONTATO
       ================================================ -->
  <section class="block" id="contato">
    <div class="container">
      <div class="block-head">
        <h2>Contato.</h2>
        <span class="num">04 / 04</span>
      </div>

      <!-- Grade 2x2 com os dados de contato. -->
      <div class="contact-grid">
        <div class="contact-cell">
          <span class="label">Telefone</span>
          <strong>+55 11 99999-9999</strong>
        </div>
        <div class="contact-cell">
          <span class="label">E-mail</span>
          <strong><a href="mailto:contato@analima.com.br">contato@analima.com.br</a></strong>
        </div>
        <div class="contact-cell">
          <span class="label">Endereço</span>
          <strong>São Paulo, SP, Brasil</strong>
        </div>
        <div class="contact-cell">
          <span class="label">Atendimento</span>
          <strong>Seg a Sex, 09h às 18h</strong>
        </div>
      </div>

      <!-- Linha de redes sociais. Troque o "#" pelo link completo
           do seu perfil em cada rede (ex: https://instagram.com/seuusuario). -->
      <div class="socials">
        <a href="#">Instagram</a>
        <a href="#">LinkedIn</a>
        <a href="#">WhatsApp</a>
        <a href="#">GitHub</a>
      </div>
    </div>
  </section>

  <!-- ================================================
       FOOTER
       ================================================ -->
  <footer>
    <div class="container">
      © 2026, Ana Lima
    </div>
  </footer>

</body>

Etapa 02 · Conectando o CSS

O CSS básico.

Cole aqui O arquivo style.css está vazio. Cole isto inteiro nele:

CSSstyle.css

/* ↓↓↓  COLE ISTO no style.css (ele está vazio)  ↓↓↓ */

/* ==================================================
   VARIÁVEIS CSS — fácil trocar a paleta depois
   Esta é a maior mágica do CSS moderno: você define um valor
   uma vez aqui dentro do :root, e depois usa esse valor em
   qualquer lugar escrevendo var(--nome-da-variavel).
   ================================================== */
:root {
  /* Paleta bone + oxblood */
  --paper: #ece6db;
  --paper-2: #e3dcce;
  --ink: #1c1a17;
  --ink-soft: #2b2925;
  --muted: #6e6859;
  --accent: #7a2018;
  --accent-2: #a13328;

  /* Fontes */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-text: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ==================================================
   RESET BÁSICO
   Cada navegador (Chrome, Safari, Firefox) coloca margens e
   espaços diferentes nos elementos. O reset zera tudo pra que
   o seu site comece igual em qualquer um deles.
   ================================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
}

/* Limita a largura das imagens à largura do espaço delas.
   Sem isso, fotos grandes "estouram" o layout. */
img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Títulos usam a fonte de destaque. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}

Salve e atualize: a página ganha fundo cor de papel, texto escuro e fontes bonitas — ainda em coluna. No material: etapas/v2-css-conectado/.

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 03 · Cabeçalho e Sobre

CSS do cabeçalho e do Sobre — completo.

Cole no fim Cole este CSS no fim do seu style.css (logo depois do que já tem):

CSSstyle.css · hero + sobre

/* ↓↓↓  COLE TUDO ISTO NO FIM DO SEU style.css  ↓↓↓ */

/* ==================================================
   HELPERS — pequenos componentes reutilizáveis
   ================================================== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.dot {
  color: var(--accent-2);
}

/* ==================================================
   HERO — o cartão preto no topo
   ================================================== */
.hero {
  background-color: var(--ink);
  color: var(--paper);
  padding: 80px 0 100px;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}

.hero-top .label {
  color: rgba(236, 230, 219, 0.5);
}

.mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(236, 230, 219, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--paper);
}

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  object-fit: cover;
  margin-bottom: 28px;
}

.hero h1 {
  font-size: 64px;
  color: var(--paper);
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}

.role {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(236, 230, 219, 0.78);
  margin: 0 0 32px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid rgba(236, 230, 219, 0.15);
  border-bottom: 1px solid rgba(236, 230, 219, 0.15);
  margin-bottom: 32px;
}

.hero-meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-meta .label {
  color: rgba(236, 230, 219, 0.5);
}

.hero-meta strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--paper);
}

/* Botão de ação (CTA) no fim do hero. */
.cta {
  display: inline-block;
  background-color: var(--accent);
  color: var(--paper);
  padding: 16px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  transition: background-color 0.2s;
  margin-bottom: 40px;
}

.cta:hover {
  background-color: var(--accent-2);
}

.thought {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(236, 230, 219, 0.78);
  margin: 0;
}

.thought span {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 12px;
  color: rgba(236, 230, 219, 0.5);
}

/* ==================================================
   BLOCOS DE CONTEÚDO — base reutilizada por Sobre,
   Serviços, Trabalhos e Contato.
   ================================================== */
.block {
  padding: 80px 0;
  border-bottom: 1px solid rgba(28, 26, 23, 0.12);
}

.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.block-head h2 {
  font-size: 40px;
  max-width: 16ch;
}

/* ==================================================
   01 SOBRE
   ================================================== */
.lead {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 16px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(28, 26, 23, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.pill strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--accent);
}

No material: 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 04 · Serviços e Contato

CSS de Serviços, Trabalhos e Contato — completo.

Cole no fim Cole este CSS no fim do seu style.css (logo depois do que já tem):

CSSstyle.css · serviços + galeria + contato

/* ↓↓↓  COLE TUDO ISTO NO FIM DO SEU style.css  ↓↓↓ */

/* ==================================================
   02 SERVIÇOS — lista vertical com flexbox
   ================================================== */
.services {
  list-style: none;
  padding: 0;
  margin: 0;
}

.services li {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid rgba(28, 26, 23, 0.15);
  align-items: flex-start;
}

.services li:last-child {
  border-bottom: 1px solid rgba(28, 26, 23, 0.15);
}

.svc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  padding-top: 6px;
  min-width: 50px;
}

.services h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.services p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 50ch;
}

/* ==================================================
   03 TRABALHOS — galeria com CSS Grid
   ================================================== */
.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;
}

.work img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: var(--paper-2);
  transition: transform 0.4s;
}

/* Pequeno zoom na imagem quando o mouse passa em cima. */
.work:hover img {
  transform: scale(1.02);
}

.work h3 {
  font-size: 20px;
  margin: 16px 0 8px;
}

.work-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.work-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  display: flex;
  gap: 14px;
}

.work-meta .year {
  color: var(--accent);
}

/* ==================================================
   04 CONTATO
   ================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
  padding: 28px 0;
  border-top: 1px solid rgba(28, 26, 23, 0.15);
  border-bottom: 1px solid rgba(28, 26, 23, 0.15);
}

.contact-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-cell strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.socials {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.socials a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ==================================================
   FOOTER
   ================================================== */
footer {
  padding: 32px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

No material: 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 05 · Páginas de detalhe

Faça os cards virarem links.

Substitua Troque toda a sua <section id="trabalhos"> por esta — cada card virou um <a> que abre uma página:

HTMLindex.html · trabalhos

<!-- ↓↓↓  SUBSTITUA toda a sua <section id="trabalhos"> por esta (os cards viraram links)  ↓↓↓ -->

<!-- ================================================
       03 TRABALHOS — galeria de projetos
       Cada <div class="work"> é UM projeto.
       Galeria usa CSS Grid de 3 colunas (vira 1 no celular).
       ================================================ -->
  <section class="block" id="trabalhos">
    <div class="container">
      <div class="block-head">
        <h2>Alguns trabalhos.</h2>
        <span class="num">03 / 04</span>
      </div>

      <div class="works">

        <a class="work" href="trabalho-1.html">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=01" alt="Capa do Trabalho 01">
          <h3>Trabalho · 01</h3>
          <p class="work-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </a>

        <a class="work" href="trabalho-2.html">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=02" alt="Capa do Trabalho 02">
          <h3>Trabalho · 02</h3>
          <p class="work-desc">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </a>

        <a class="work" href="trabalho-3.html">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=03" alt="Capa do Trabalho 03">
          <h3>Trabalho · 03</h3>
          <p class="work-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </a>

        <a class="work" href="trabalho-4.html">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=04" alt="Capa do Trabalho 04">
          <h3>Trabalho · 04</h3>
          <p class="work-desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </a>

        <a class="work" href="trabalho-5.html">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=05" alt="Capa do Trabalho 05">
          <h3>Trabalho · 05</h3>
          <p class="work-desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </a>

        <a class="work" href="trabalho-6.html">
          <img src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=06" alt="Capa do Trabalho 06">
          <h3>Trabalho · 06</h3>
          <p class="work-desc">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.</p>
          <div class="work-meta">
            <span>Ver detalhes →</span>
          </div>
        </a>

      </div>
    </div>
  </section>

Etapa 05 · Páginas de detalhe

Crie a página trabalho-1.html.

Crie o arquivo Crie trabalho-1.html na mesma pasta do index e cole isto. Pras outras, copie e troque imagem/texto (já vêm prontas no material):

HTMLtrabalho-1.html

<!-- ↓↓↓  CRIE o arquivo trabalho-1.html e cole isto  ↓↓↓ -->

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trabalho · 01 — Ana Lima</title>

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

  <!-- Mesmo CSS da página inicial. -->
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

  <!-- ================================================
       PÁGINA DE DETALHE DE UM TRABALHO
       É um arquivo .html separado, ligado ao index pelo card.
       Pra fazer as outras: copie este arquivo (trabalho-2.html,
       trabalho-3.html...), troque a imagem e o texto, e ligue cada
       card no index com <a href="trabalho-2.html"> ... </a>.
       ================================================ -->
  <main class="block">
    <div class="container">

      <!-- Volta pra galeria de trabalhos da página inicial. -->
      <a class="back" href="index.html#trabalhos">← Voltar aos trabalhos</a>

      <div class="detail">
        <!-- Troque pela imagem real do seu trabalho (proporção 3:2). -->
        <img class="detail-img" src="https://placehold.co/1200x800/e3dcce/6e6859/png?text=01" alt="Capa do Trabalho 01">

        <div class="detail-info">
          <span class="label">Trabalho</span>
          <h1>Trabalho · 01<span class="dot">.</span></h1>
          <!-- Escreva aqui a descrição: o que era, o que você fez, o resultado. -->
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>

    </div>
  </main>
  <!-- ================================================
       CONTATO — mesma seção da página inicial
       ================================================ -->
  <section class="block" id="contato">
    <div class="container">
      <div class="block-head">
        <h2>Contato.</h2>
      </div>
      <!-- Grade 2x2 com os dados de contato. Troque pelos seus. -->
      <div class="contact-grid">
        <div class="contact-cell">
          <span class="label">Telefone</span>
          <strong>+55 11 99999-9999</strong>
        </div>
        <div class="contact-cell">
          <span class="label">E-mail</span>
          <strong><a href="mailto:contato@analima.com.br">contato@analima.com.br</a></strong>
        </div>
        <div class="contact-cell">
          <span class="label">Endereço</span>
          <strong>São Paulo, SP, Brasil</strong>
        </div>
        <div class="contact-cell">
          <span class="label">Atendimento</span>
          <strong>Seg a Sex, 09h às 18h</strong>
        </div>
      </div>
      <!-- Troque o "#" pelo link completo do seu perfil em cada rede. -->
      <div class="socials">
        <a href="#">Instagram</a>
        <a href="#">LinkedIn</a>
        <a href="#">WhatsApp</a>
        <a href="#">GitHub</a>
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      © 2026, Ana Lima
    </div>
  </footer>

</body>
</html>

No material: etapas/v5-paginas-de-detalhe/.

Etapa 05 · Páginas de detalhe

CSS da página de detalhe — completo.

Cole no fim Cole no fim do seu style.css:

CSSstyle.css · detalhe

/* ↓↓↓  COLE NO FIM DO SEU style.css  ↓↓↓ */

/* ==================================================
   05 PÁGINA DE DETALHE DO TRABALHO
   Usada nas páginas trabalho-1.html ... trabalho-6.html.
   Layout em 2 colunas (imagem + texto); vira coluna única no celular.
   Pra criar a sua: copie um trabalho-N.html, troque a imagem e o texto,
   e ligue o card a ele no index com <a href="trabalho-1.html">.
   ================================================== */

/* Link "voltar" pro topo da página inicial. */
.back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 40px;
}
.back:hover { color: var(--accent); }

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.detail-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: var(--paper-2);
}

.detail-info h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 10px 0 20px;
}

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 06 · Polimento e celular

A media query — completa.

Cole no fim Cole no fim do seu style.css. Pronto: o site fica responsivo no celular.

CSSstyle.css · responsivo

/* ↓↓↓  COLE NO FIM DO SEU style.css — é a última peça  ↓↓↓ */

/* ==================================================
   RESPONSIVO — ajustes para celular
   A partir de 720px de largura para baixo, os layouts
   de grade viram coluna única.
   ================================================== */
@media (max-width: 720px) {

  /* Página de detalhe: imagem em cima, texto embaixo. */
  .detail { grid-template-columns: 1fr; gap: 28px; }
  .detail-info h1 { font-size: 34px; }

  .hero {
    padding: 60px 0 80px;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-meta {
    gap: 20px;
  }

  .block {
    padding: 60px 0;
  }

  .block-head h2 {
    font-size: 30px;
  }

  /* Galeria vira coluna única no celular */
  .works {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Contato vira coluna única no celular */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .services li {
    gap: 16px;
  }

  .services h3 {
    font-size: 20px;
  }
}

No material: etapas/v6-polish-e-responsivo/. É a última peça do CSS.

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.

Abra app.netlify.com/drop.
Abra a pasta onde está seu meu-site.
Arraste a pasta inteira pra cima da área cinza.
Espere de 5 a 30 segundos.
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

Seu primeirosite no ar.

O que você vai aprender.

Você vai sair com

O que você NÃO precisa

Como a web funciona.

As três ferramentas.

Visual Studio Code

O que você já usa

meu-site

HTML cru.

HTML é uma linguagem de tags.

Estrutura mínima de toda página.

Vamos lá: crie o index.html.

Preencha o body — parte 1.

Preencha o body — parte 2.

Conectandoo CSS.

CSS controla o visual.

Crie e conecte o style.css.

Importe as fontes do Google.

Vista o HTML com classes.

O CSS básico.

Cabeçalhoe Sobre.

Classes.

Helpers reutilizáveis.

O HTML do cabeçalho.

O CSS do cabeçalho.

A seção Sobre.

CSS do cabeçalho e do Sobre — completo.

Serviços,Trabalhose Contato.

Serviços com flexbox.

CSS Grid e a galeria.

O CSS dos cards da galeria.

Bloco de contato.

CSS de Serviços, Trabalhos e Contato — completo.

Páginasde detalhe.

Um site pode ter várias páginas.

A página de detalhe.

Faça os cards virarem links.

Crie a página trabalho-1.html.

CSS da página de detalhe — completo.

Polimentoe celular.

Media query.

A media query — completa.

Publicandoseu site.

Publicar no Netlify Drop.

Endereço e atualização.

Se você curtiu e quer ir além.

HTML & CSS

Seu site

JavaScript

Agora é comvocês.

Seu primeiro
site no ar.

Conectando
o CSS.

Cabeçalho
e Sobre.

Serviços,
Trabalhos
e Contato.

Páginas
de detalhe.

Polimento
e celular.

Publicando
seu site.

Agora é com
vocês.