Programação Web I

O que você vai aprender

• Diferenciar Internet, Web, site e página.
• Entender o papel do navegador, do servidor e do endereço.
• Fazer um primeiro experimento com HTML.
• Criar e abrir uma pasta de projeto no VS Code.
• Criar o arquivo index.html com a estrutura mínima correta.
• Visualizar, alterar e salvar a primeira página do Café Aurora.

Aula 1 — Como a Web funciona

As três tecnologias que encontraremos

• HTML: organiza e dá significado ao conteúdo.
• CSS: cuida da apresentação visual e do layout.
• JavaScript: acrescenta comportamento e interação.

Neste começo, nosso foco será o HTML. Assim, cada tecnologia entra quando surge uma necessidade real no projeto.

O caminho de uma página

Aula 2 — Seu primeiro contato com HTML

Antes de organizar um projeto completo, vamos experimentar duas marcações no Playground da MDN (abre em nova aba). Ele permite alterar um pequeno exemplo e observar o resultado imediatamente.

<h1>Café Aurora</h1>
<p>Café, encontros e bons momentos no coração do bairro.</p>

As marcações <h1> e <p> são chamadas de tags. A primeira indica o título principal; a segunda, um parágrafo. A maior parte dos elementos possui uma tag de abertura, conteúdo e uma tag de fechamento.

Aula 3 — Preparando o projeto no VS Code

1. Instale o VS Code para Windows. Em computador compartilhado, siga a orientação do professor antes de instalar.
2. Crie uma pasta chamada cafe-aurora.
3. No VS Code, use Arquivo → Abrir Pasta e selecione essa pasta.

No painel lateral do VS Code, crie o arquivo index.html. O nome index é tradicionalmente usado para a página inicial de uma pasta ou de um site.

Aula 4 — O primeiro documento completo

Digite no arquivo index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Café Aurora</title>
</head>
<body>
  <h1>Café Aurora</h1>
  <p>Café, encontros e bons momentos no coração do bairro.</p>
</body>
</html>

Visualizando a página

No painel de extensões do VS Code, procure Live Preview e confirme que o publicador é Microsoft. A página oficial da extensão está no Visual Studio Marketplace. Depois de instalada, clique com o botão direito em index.html e escolha Show Preview.

Primeiro contato com DevTools

Na página aberta no navegador, clique com o botão direito sobre o título e escolha Inspecionar. No painel Elements, localize o h1, dê dois cliques em seu texto e troque-o temporariamente por “Café Aurora — teste”.

Erros comuns

• Salvar como index.html.txt.
• Criar o arquivo fora da pasta cafe-aurora.
• Esquecer o fechamento de uma tag.
• Alterar o arquivo e não salvá-lo antes de verificar o resultado.
• Digitar conteúdo visível fora do elemento <body>.

<h2>Uma pausa especial no seu dia</h2>
<p>Conheça cafés selecionados, receitas artesanais e um ambiente acolhedor.</p>

O que você vai aprender

• Reconhecer elementos, tags, conteúdo e atributos.
• Organizar títulos e subtítulos em uma hierarquia coerente.
• Usar parágrafos, ênfase, listas e comentários.
• Criar links internos e externos e entender caminhos relativos.
• Inserir imagens com texto alternativo e dimensões.
• Melhorar o título e a descrição da página.

Aula 1 — Elementos, atributos e hierarquia

Observe a estrutura de um elemento:

<p>Café, encontros e bons momentos.</p>
│                 │                  │
abertura        conteúdo          fechamento

Alguns elementos recebem atributos, informações adicionais escritas na tag de abertura. Em <html lang="pt-BR">, por exemplo, lang informa o idioma do documento.

Títulos formam uma hierarquia

O HTML oferece títulos de <h1> a <h6>. Eles não devem ser escolhidos pelo tamanho visual, mas pelo nível de cada assunto.

• <h1>: assunto principal da página.
• <h2>: grandes seções desse assunto.
• <h3>: subdivisões de uma seção.

<h1>Café Aurora</h1>

<h2>Destaques da casa</h2>
<h3>Café coado</h3>
<p>Grãos selecionados e preparo cuidadoso.</p>

<h3>Pães artesanais</h3>
<p>Produção diária com ingredientes frescos.</p>

Aula 2 — Textos, listas e comentários

Use <strong> quando uma informação tiver forte importância e <em> para dar ênfase ao trecho.

<p><strong>Aberto de segunda a sábado.</strong></p>
<p>Um espaço <em>acolhedor</em> para sua pausa.</p>

Listas não ordenadas

Use <ul> quando a ordem dos itens não altera o sentido:

<ul>
  <li>Cafés especiais</li>
  <li>Pães artesanais</li>
  <li>Opções vegetarianas</li>
</ul>

Listas ordenadas

Use <ol> quando a sequência importa:

<ol>
  <li>Escolha seu café</li>
  <li>Selecione um acompanhamento</li>
  <li>Faça seu pedido no balcão</li>
</ol>

Comentários no código

<!-- Esta seção será ampliada quando o cardápio estiver pronto. -->

Comentários ajudam a registrar decisões para quem edita o arquivo e não aparecem na página. Mesmo assim, fazem parte do código enviado ao navegador: nunca coloque senhas, dados pessoais ou informações secretas neles.

Aula 3 — Links e caminhos

Um link é criado com o elemento <a>. O atributo href informa o destino.

Link para uma parte da própria página

<a href="#diferenciais">Conheça nossos diferenciais</a>

<h2 id="diferenciais">Nossos diferenciais</h2>

O valor após # deve ser igual ao id do elemento de destino. Cada id deve ser único na página.

Endereço absoluto

Um endereço absoluto contém o destino completo e costuma apontar para outro site:

<a href="https://developer.mozilla.org/pt-BR/">Consultar a MDN</a>

Caminho relativo

Um caminho relativo parte da localização do arquivo atual. Quando criarmos uma segunda página na mesma pasta, o link poderá ser:

<a href="cardapio.html">Ver cardápio</a>

Aula 4 — Imagens e informações da página

Dentro da pasta cafe-aurora, crie uma pasta chamada img. Para realizar a atividade sem precisar procurar uma foto, você pode baixar a imagem preparada para o Café Aurora.

Imagem pronta para a atividade

Salve o arquivo baixado dentro da pasta img. A organização ficará assim:

Em um projeto real, você também poderá usar uma foto produzida por você, fornecida pelo responsável do negócio ou obtida com autorização de uso. Renomeie o arquivo de modo descritivo antes de colocá-lo na pasta.

<img
  src="img/ambiente-cafe.webp"
  alt="Salão do Café Aurora com mesas de madeira e plantas"
  width="1200"
  height="800"
>

• src indica onde o arquivo está.
• alt comunica o conteúdo ou a função da imagem a quem não consegue vê-la.
• width e height informam suas proporções e ajudam o navegador a reservar o espaço correto.

Imagem com legenda

<figure>
  <img
    src="img/ambiente-cafe.webp"
    alt="Salão do Café Aurora com mesas de madeira e plantas"
    width="1200"
    height="800"
  >
  <figcaption>Um espaço tranquilo para conversar, estudar ou trabalhar.</figcaption>
</figure>

Título e descrição do documento

Dentro de <head>, atualize:

<title>Café Aurora — Café e produtos artesanais no bairro</title>
<meta
  name="description"
  content="Conheça o Café Aurora, seus cafés especiais, produtos artesanais, ambiente e horário de atendimento."
>

O título identifica a página na aba e em outros contextos. A descrição resume o conteúdo para mecanismos de busca e compartilhamentos, embora sua exibição não seja garantida.

Versão consolidada da página

Compare seu arquivo com esta versão. Não copie apenas por copiar: identifique a função de cada elemento.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta
    name="description"
    content="Conheça o Café Aurora, seus cafés especiais, produtos artesanais, ambiente e horário de atendimento."
  >
  <title>Café Aurora — Café e produtos artesanais no bairro</title>
</head>
<body>
  <h1>Café Aurora</h1>
  <p>Café, encontros e bons momentos no coração do bairro.</p>

  <a href="#destaques">Conheça nossos destaques</a>

  <h2 id="destaques">Destaques da casa</h2>

  <h3>Café coado</h3>
  <p>Grãos selecionados e preparo cuidadoso.</p>

  <h3>Pães artesanais</h3>
  <p>Produção diária com ingredientes frescos.</p>

  <h2>Nossos diferenciais</h2>
  <ul>
    <li>Cafés especiais</li>
    <li>Pães artesanais</li>
    <li>Opções vegetarianas</li>
    <li>Wi-Fi e tomadas disponíveis</li>
  </ul>

  <figure>
    <img
      src="img/ambiente-cafe.webp"
      alt="Salão do Café Aurora com mesas de madeira e plantas"
      width="1200"
      height="800"
    >
    <figcaption>Um espaço tranquilo para conversar, estudar ou trabalhar.</figcaption>
  </figure>

  <h2>Horário de atendimento</h2>
  <p><strong>De segunda a sábado, das 8h às 19h.</strong></p>
</body>
</html>

Valide o HTML antes de avançar

O validador ajuda a encontrar erros de marcação que o navegador pode tentar corrigir silenciosamente. Salve seu arquivo e abra o HTML Checker do W3C (abre em nova aba).

1. Escolha a opção de enviar o arquivo ou copie o conteúdo de index.html para o campo de texto.
2. Inicie a verificação e leia a primeira mensagem de erro, observando a linha indicada.
3. Corrija primeiro problemas simples, como uma tag sem fechamento ou um id repetido.
4. Salve e valide novamente até não restarem erros de marcação.

Erros comuns para revisar

• Escolher títulos pelo tamanho visual e quebrar a hierarquia.
• Usar listas apenas para produzir recuos.
• Repetir o mesmo id em vários elementos.
• Criar um link para um arquivo que ainda não existe.
• Usar caminho local do computador, como C:\Fotos\..., no atributo src.
• Esquecer o alt ou escrever uma descrição que não ajuda.
• Usar imagens muito grandes sem necessidade ou sem autorização.

O que você vai aprender

• Planejar as páginas de acordo com o que cada visitante precisa encontrar.
• Criar e nomear documentos dentro de uma estrutura de arquivos previsível.
• Conectar as páginas com um menu e caminhos relativos.
• Organizar as grandes regiões com header, nav, main, section e footer.
• Usar article e div quando a necessidade do conteúdo justificar cada um.
• Manter títulos, descrições, imagens e navegação coerentes entre as páginas.
• Testar o site e localizar links ou caminhos quebrados.

Aula 1 — Planejando antes de programar

Antes de abrir novos arquivos no VS Code, pense no que cada pessoa procura. Quem deseja apenas o horário não deveria precisar percorrer a história e todos os produtos; quem abriu o cardápio espera encontrar os itens sem procurar no restante da página. Para o Café Aurora, quatro páginas atendem bem essas necessidades sem fragmentar demais o site:

Mapa do site

Esse desenho simples é um mapa do site. Antes de escrever código, ele permite enxergar quais páginas existirão e qual pergunta cada uma deverá responder. No Café Aurora, todas serão alcançadas pelo mesmo menu principal.

Estrutura de arquivos

Agora transforme o plano em arquivos. No explorador do VS Code, crie cardapio.html, sobre.html e contato.html na mesma pasta de index.html.

Título e descrição de cada página

Aula 2 — Conectando as páginas e dando significado à estrutura

Agora existem quatro arquivos, mas arquivos isolados ainda não formam uma boa experiência de navegação. Se alguém estiver no Cardápio, precisa conseguir voltar ao Início, conhecer a história ou encontrar o Contato sem procurar outro caminho. Essa necessidade é o motivo de criarmos um menu comum às páginas.

Ao mesmo tempo, o documento passa a ter regiões com papéis diferentes: uma área de identificação, a navegação, o conteúdo principal, assuntos internos e informações finais. O HTML possui elementos semânticos para deixar esses papéis explícitos.

O menu conecta o site; a semântica explica cada região

Como os quatro documentos HTML estão na mesma pasta, caminhos como href="cardapio.html" partem da página atual e encontram o arquivo vizinho. Agora aplique essa navegação e reorganize o body de index.html:

<body>
  <header>
    <p><a href="index.html">Café Aurora</a></p>

    <nav aria-label="Navegação principal">
      <ul>
        <li><a href="index.html" aria-current="page">Início</a></li>
        <li><a href="cardapio.html">Cardápio</a></li>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Café Aurora</h1>
    <p>Café, encontros e bons momentos no coração do bairro.</p>

    <section aria-labelledby="destaques">
      <h2 id="destaques">Destaques da casa</h2>
      <h3>Café coado</h3>
      <p>Grãos selecionados e preparo cuidadoso.</p>
      <h3>Pães artesanais</h3>
      <p>Produção diária com ingredientes frescos.</p>
    </section>

    <section aria-labelledby="ambiente">
      <h2 id="ambiente">Um ambiente acolhedor</h2>
      <figure>
        <img
          src="img/ambiente-cafe.webp"
          alt="Salão do Café Aurora com mesas de madeira e plantas"
          width="1536"
          height="1024"
        >
        <figcaption>Um espaço para conversar, estudar ou trabalhar.</figcaption>
      </figure>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Café Aurora. Projeto educacional fictício.</p>
  </footer>
</body>

• aria-label dá um nome claro à região de navegação.
• aria-labelledby liga uma região ao título indicado pelo respectivo id.
• aria-current="page" informa qual link representa a página atual.
• O caractere escrito como © é exibido como © no navegador.

Aula 3 — Construindo a página do cardápio

Com as páginas conectadas, surge outra necessidade de organização. O Cardápio reunirá vários produtos dentro do mesmo assunto, mas cada produto possui nome, imagem, descrição e preço e pode ser entendido como uma unidade. É nesse contexto que article passa a fazer sentido.

Baixe as três imagens e coloque-as na pasta img do seu projeto.

Imagens prontas para o cardápio

As imagens foram preparadas para esta atividade e possuem o mesmo tamanho e proporção.

Depois de baixar as imagens, construa o arquivo cardapio.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta
    name="description"
    content="Conheça os cafés e produtos artesanais do Café Aurora."
  >
  <title>Cardápio — Café Aurora</title>
</head>
<body>
  <header>
    <p><a href="index.html">Café Aurora</a></p>

    <nav aria-label="Navegação principal">
      <ul>
        <li><a href="index.html">Início</a></li>
        <li><a href="cardapio.html" aria-current="page">Cardápio</a></li>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Cardápio</h1>
    <p>Conheça alguns dos destaques preparados no Café Aurora.</p>

    <section aria-labelledby="destaques-cardapio">
      <h2 id="destaques-cardapio">Destaques da casa</h2>

      <article>
        <h3>Café coado</h3>
        <figure>
          <img
            src="img/cafe-coado.webp"
            alt="Xícara de café coado ao lado de uma pequena jarra"
            width="1536"
            height="1024"
            loading="lazy"
          >
          <figcaption>Café preparado na hora com grãos selecionados.</figcaption>
        </figure>
        <p><strong>R$ 8,00</strong></p>
      </article>

      <article>
        <h3>Pão artesanal</h3>
        <figure>
          <img
            src="img/pao-artesanal.webp"
            alt="Pão artesanal cortado sobre uma mesa de madeira"
            width="1536"
            height="1024"
            loading="lazy"
          >
          <figcaption>Pão de fermentação lenta produzido diariamente.</figcaption>
        </figure>
        <p><strong>R$ 12,00</strong></p>
      </article>

      <article>
        <h3>Bolo caseiro de laranja</h3>
        <figure>
          <img
            src="img/bolo-caseiro.webp"
            alt="Bolo caseiro de laranja com uma fatia servida"
            width="1536"
            height="1024"
            loading="lazy"
          >
          <figcaption>Receita caseira preparada com laranjas frescas.</figcaption>
        </figure>
        <p><strong>R$ 9,00 a fatia</strong></p>
      </article>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Café Aurora. Projeto educacional fictício.</p>
  </footer>
</body>
</html>

Aula 4 — Completando o site sem perder a orientação

O Cardápio já mostra a vantagem de separar o conteúdo em páginas. Agora precisamos garantir que, ao entrar em Sobre ou Contato, o visitante continue sentindo que está no mesmo site. Por isso, as páginas restantes reutilizarão cabeçalho, menu e rodapé, mudando apenas o conteúdo principal e as informações próprias de cada documento.

Conteúdo principal de sobre.html

<main>
  <h1>Sobre o Café Aurora</h1>

  <section aria-labelledby="nossa-historia">
    <h2 id="nossa-historia">Nossa história</h2>
    <p>O Café Aurora nasceu do desejo de criar um ponto de encontro
      acolhedor para as pessoas do bairro.</p>
    <p>Valorizamos o preparo cuidadoso, os ingredientes frescos e o
      atendimento próximo.</p>
  </section>

  <section aria-labelledby="nosso-espaco">
    <h2 id="nosso-espaco">Nosso espaço</h2>
    <figure>
      <img
        src="img/ambiente-cafe.webp"
        alt="Salão do Café Aurora com mesas de madeira e plantas"
        width="1536"
        height="1024"
        loading="lazy"
      >
      <figcaption>Um ambiente tranquilo no coração do bairro.</figcaption>
    </figure>
  </section>
</main>

No menu de sobre.html, retire aria-current do link anterior e coloque-o no link Sobre:

<li><a href="sobre.html" aria-current="page">Sobre</a></li>

Conteúdo principal de contato.html

<main>
  <h1>Contato e localização</h1>

  <section aria-labelledby="onde-estamos">
    <h2 id="onde-estamos">Onde estamos</h2>
    <address>
      <p>Rua das Flores, 123 — Centro</p>
      <p>Telefone: <a href="tel:+551100000000">(11) 0000-0000</a></p>
      <p>E-mail: <a href="mailto:contato@cafeaurora.example">contato@cafeaurora.example</a></p>
    </address>
  </section>

  <section aria-labelledby="horarios">
    <h2 id="horarios">Horário de atendimento</h2>
    <ul>
      <li>Segunda a sexta: das 8h às 19h</li>
      <li>Sábado: das 8h às 18h</li>
      <li>Domingo: fechado</li>
    </ul>
  </section>
</main>

O elemento address representa informações de contato relacionadas à página ou ao conteúdo mais próximo. Ele não deve ser usado apenas para criar texto em itálico.

O menu precisa ser igual em todas as páginas

Imagine clicar em Contato e encontrar os itens do menu em outra ordem ou com nomes diferentes. Mesmo que os links funcionem, a navegação passa a parecer instável. Como este é um site estático, o menu está escrito em cada arquivo: sempre que acrescentar ou renomear uma página, revise todas as cópias. A única diferença será a posição de aria-current="page".

Erros comuns para revisar

• Criar uma nova página fora da pasta cafe-aurora.
• Usar espaços, acentos ou letras maiúsculas de forma inconsistente nos nomes dos arquivos.
• Copiar uma página e esquecer de alterar title, descrição ou h1.
• Colocar mais de um main no mesmo documento.
• Usar section apenas como uma caixa sem assunto ou título.
• Deixar aria-current="page" em dois links do mesmo menu.
• Corrigir o menu em uma página e esquecer as demais.
• Escrever caminhos como img\cafe-coado.webp; na Web, use a barra /.

O que você vai aprender

• Entender o caminho dos dados de um formulário.
• Reconhecer a função de form, label, input, select, textarea e button.
• Relacionar rótulos e campos com for e id.
• Organizar campos relacionados com fieldset e legend.
• Usar tipos de campo, name, autocomplete, required, limites e instruções.
• Testar o formulário com teclado, ampliação e validação nativa.
• Distinguir validação no navegador de validação no servidor.

Aula 1 — O que acontece com os dados

Um formulário é uma região com controles interativos usados para coletar informações. Quando o visitante envia os dados, o navegador prepara uma solicitação para um endereço capaz de recebê-los.

A estrutura inicial

<form action="/enviar-contato" method="post">
  <!-- Os campos serão colocados aqui. -->
</form>

Aula 2 — Campos identificados corretamente

Todo campo precisa de um rótulo visível que explique o que deve ser informado. A associação explícita usa o atributo for no label e um id igual no controle.

<label for="nome">Nome completo (obrigatório)</label>
<input
  type="text"
  id="nome"
  name="nome"
  autocomplete="name"
  minlength="2"
  required
>

E-mail e telefone

<div>
  <label for="email">E-mail (obrigatório)</label>
  <input
    type="email"
    id="email"
    name="email"
    autocomplete="email"
    required
  >
</div>

<div>
  <label for="telefone">Telefone (opcional)</label>
  <p id="ajuda-telefone">Inclua o código de área.</p>
  <input
    type="tel"
    id="telefone"
    name="telefone"
    autocomplete="tel"
    aria-describedby="ajuda-telefone"
  >
</div>

• type="email" permite ao navegador verificar o formato básico e oferecer teclado apropriado.
• type="tel" favorece o teclado numérico em dispositivos móveis, mas não impõe sozinho um formato universal.
• aria-describedby conecta o campo a uma instrução complementar já visível.

Aula 3 — Montando o formulário completo

No arquivo contato.html, mantenha as informações de localização e acrescente esta seção dentro de main:

<section aria-labelledby="fale-conosco">
  <h2 id="fale-conosco">Fale conosco</h2>
  <p id="orientacao-formulario">
    Os campos identificados como obrigatórios devem ser preenchidos.
  </p>

  <form
    action="/enviar-contato"
    method="post"
    aria-describedby="orientacao-formulario"
  >
    <fieldset>
      <legend>Seus dados</legend>

      <div>
        <label for="nome">Nome completo (obrigatório)</label>
        <input
          type="text"
          id="nome"
          name="nome"
          autocomplete="name"
          minlength="2"
          required
        >
      </div>

      <div>
        <label for="email">E-mail (obrigatório)</label>
        <input
          type="email"
          id="email"
          name="email"
          autocomplete="email"
          required
        >
      </div>

      <div>
        <label for="telefone">Telefone (opcional)</label>
        <p id="ajuda-telefone">Inclua o código de área.</p>
        <input
          type="tel"
          id="telefone"
          name="telefone"
          autocomplete="tel"
          aria-describedby="ajuda-telefone"
        >
      </div>
    </fieldset>

    <fieldset>
      <legend>Sua mensagem</legend>

      <div>
        <label for="assunto">Assunto (obrigatório)</label>
        <select id="assunto" name="assunto" required>
          <option value="" selected disabled>Selecione uma opção</option>
          <option value="duvida">Dúvida</option>
          <option value="encomenda">Encomenda</option>
          <option value="sugestao">Sugestão</option>
        </select>
      </div>

      <div>
        <label for="mensagem">Mensagem (obrigatória)</label>
        <p id="ajuda-mensagem">Escreva entre 10 e 500 caracteres.</p>
        <textarea
          id="mensagem"
          name="mensagem"
          rows="6"
          minlength="10"
          maxlength="500"
          aria-describedby="ajuda-mensagem"
          required
        ></textarea>
      </div>
    </fieldset>

    <button type="submit">Enviar mensagem</button>
  </form>
</section>

Aula 4 — Acessibilidade e testes reais

Acessibilidade não é um recurso acrescentado no final. Ela começa na escolha de elementos nativos, na ordem lógica do documento e em instruções que não dependem apenas de cor, posição ou memória.

Imagem para reconhecer o local

Uma foto da fachada pode ajudar quem visitará o Café Aurora pela primeira vez. Baixe-a e salve na pasta img.

Fachada do Café Aurora

Acrescente a imagem à seção “Onde estamos”:

<figure>
  <img
    src="img/fachada-cafe.webp"
    alt="Fachada clara do Café Aurora com porta verde, janelas de madeira,
      plantas e mesas externas"
    width="1536"
    height="1024"
    loading="lazy"
  >
  <figcaption>Reconheça nossa entrada pela porta verde.</figcaption>
</figure>

Teste usando somente o teclado

1. Pressione Tab para avançar pelos links, campos e botão.
2. Use Shift + Tab para voltar.
3. Confirme se a ordem acompanha a leitura da página.
4. Observe se o elemento ativo possui uma indicação visual de foco.
5. Use as setas para escolher uma opção em select.
6. Pressione Enter no botão de envio.

Teste a validação nativa

1. Tente enviar sem preencher campos obrigatórios.
2. Digite um e-mail sem formato válido.
3. Escreva uma mensagem com menos de 10 caracteres.
4. Corrija cada problema seguindo a orientação do navegador.

Revisão de acessibilidade

• Mantenha rótulos visíveis e associados aos controles.
• Identifique campos obrigatórios em texto, além do atributo required.
• Não remova a indicação visual de foco.
• Não dependa somente de cor para comunicar erro ou obrigação.
• Use HTML nativo antes de acrescentar atributos ARIA.
• Amplie a página para 200% e confirme que ainda é possível ler e preencher tudo.

Erros comuns para revisar

• Usar placeholder como único rótulo.
• Criar label e campo com valores diferentes em for e id.
• Esquecer o atributo name, fazendo o dado chegar sem identificação ao servidor.
• Marcar um campo como obrigatório sem avisar isso no texto do rótulo.
• Usar type="text" para tudo e perder recursos nativos de e-mail e telefone.
• Criar regras rígidas para nomes ou telefones que rejeitam dados legítimos.
• Remover o contorno de foco sem oferecer substituição visível.
• Acreditar que POST ou validação HTML tornam os dados seguros.
• Testar o formulário com informações pessoais verdadeiras.

O que você vai aprender

• Explicar a função do CSS e conectá-lo corretamente ao HTML.
• Reconhecer seletor, propriedade, valor, declaração e regra.
• Usar seletores de elemento, classe e estado sem depender de estilos em linha.
• Entender os fundamentos de cascata, herança e especificidade.
• Definir cores, tipografia e espaçamento com legibilidade e contraste.
• Compreender conteúdo, preenchimento, borda e margem no modelo de caixa.
• Criar variáveis CSS e componentes visuais reutilizáveis.
• Aplicar a mesma identidade às quatro páginas do Café Aurora.

Aula 1 — Do HTML sem estilo ao primeiro arquivo CSS

HTML descreve a estrutura e o significado do conteúdo. CSS descreve como esse conteúdo será apresentado. Separar essas responsabilidades permite alterar o visual de várias páginas sem repetir estilos em cada documento.

Organize o projeto

Crie a pasta css e, dentro dela, o arquivo styles.css. Em seguida, acrescente esta linha dentro de head em cada uma das quatro páginas:

<link rel="stylesheet" href="css/styles.css">

A primeira regra

body {
  background-color: #fff8ed;
  color: #20241f;
}

Aula 2 — Seletores, classes e conflitos

Um seletor precisa alcançar o elemento certo sem tornar o código difícil de manter. Elementos são adequados para estilos gerais; classes representam funções visuais que podem ser reutilizadas.

/* Seletores de elemento: base geral */
body {
  font-family: Arial, sans-serif;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

/* Seletor de classe: componente reutilizável */
.botao {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
}

Para usar a classe, acrescente o atributo no HTML:

<a class="botao" href="cardapio.html">Conheça o cardápio</a>

Quando duas regras disputam a mesma propriedade

A cascata decide qual declaração será usada. Nesta etapa, observe três ideias: uma regra mais específica pode vencer outra mais geral; quando a força é igual, a regra escrita depois vence; algumas propriedades, como color e font-family, costumam ser herdadas pelos elementos filhos.

a {
  color: #244d3f;
}

.botao {
  color: #ffffff;
  background-color: #244d3f;
}

O link com a classe botao ficará branco porque o seletor de classe é mais específico do que o seletor de elemento.

Confira a cascata no DevTools

1. Inspecione um link com a classe botao.
2. No painel Styles, marque e desmarque temporariamente a propriedade color para ver qual regra vence.
3. Abra Computed e procure color para localizar o valor final realmente aplicado.

Esses testes também desaparecem ao recarregar a página. Depois de compreender o resultado, faça a correção permanente em styles.css.

Aula 3 — Cores, tipografia e identidade visual

Uma identidade visual não é apenas decoração. Ela cria hierarquia, reforça a personalidade do negócio e ajuda o visitante a reconhecer títulos, conteúdos e ações. Para o Café Aurora, usaremos verde escuro, terracota, creme e tons neutros.

Defina valores reutilizáveis

:root {
  --cor-principal: #244d3f;
  --cor-destaque: #8a4524;
  --cor-fundo: #fff8ed;
  --cor-superficie: #ffffff;
  --cor-texto: #20241f;
  --cor-borda: #d9cdbd;
}

* {
  box-sizing: border-box;
}

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

h1,
h2,
h3 {
  color: var(--cor-principal);
  line-height: 1.2;
}

img {
  max-width: 100%;
  height: auto;
}

Visualize a direção escolhida

Café de bairro • desde 2012

Café Aurora

Sabores artesanais e encontros tranquilos perto de você.

Conheça o cardápio

Precisa das imagens novamente? Baixar café coado · Baixar bolo caseiro

Contraste e legibilidade

• Use texto escuro sobre fundo claro ou texto claro sobre fundo escuro.
• Não use cor como única forma de indicar estado, erro ou página atual.
• Evite parágrafos inteiros em letras maiúsculas, itálico ou fonte decorativa.
• Mantenha altura de linha confortável e permita ampliação sem perda de conteúdo.
• Prefira texto real no HTML em vez de imagens contendo palavras.

Aula 4 — Modelo de caixa e componentes do Café Aurora

O navegador representa cada elemento como uma caixa. O conteúdo fica no centro; padding cria espaço interno; border desenha o limite; margin separa a caixa das demais.

.produto {
  margin-bottom: 24px;
  padding: 20px;
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
}

.botao {
  display: inline-block;
  padding: 12px 18px;
  color: #ffffff;
  background-color: var(--cor-principal);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

.botao:hover {
  background-color: #18382e;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #1b1b1b;
}

Uma abertura com imagem

A imagem usada como fundo é decorativa; por isso o conteúdo importante continua escrito no HTML. Como styles.css está dentro da pasta css, o caminho precisa voltar uma pasta antes de entrar em img.

.apresentacao {
  padding: 72px 24px;
  color: #ffffff;
  background:
    linear-gradient(rgba(20, 45, 37, .82), rgba(20, 45, 37, .82)),
    url("../img/ambiente-cafe.webp") center / cover;
}

.apresentacao h1 {
  color: #ffffff;
}

Teste antes de considerar pronto

1. Abra as quatro páginas e confirme que todas carregam a mesma folha.
2. Percorra menu, links, campos e botões usando Tab.
3. Confirme que o foco permanece claramente visível.
4. Aumente o zoom para 200% e verifique se nada fica inacessível.
5. Desative temporariamente o CSS nas ferramentas do navegador: o conteúdo ainda deve manter ordem e significado.

Erros comuns para revisar

• Esquecer o ponto antes do nome de uma classe.
• Ligar apenas uma página ao arquivo styles.css.
• Usar um caminho incorreto para CSS ou imagens.
• Repetir estilos no atributo style de vários elementos.
• Criar seletores excessivamente específicos e corrigir tudo com !important.
• Remover o contorno de foco ou deixar texto com contraste insuficiente.
• Definir alturas fixas que cortam o conteúdo quando o texto aumenta.
• Escolher cores somente pelo gosto pessoal, sem observar função e legibilidade.
• Transformar texto importante em imagem para obter determinada aparência.

O que você vai aprender

• Explicar o que torna um layout responsivo.
• Construir primeiro uma organização simples para telas estreitas.
• Usar medidas flexíveis, limites de largura e imagens fluidas.
• Organizar itens em uma direção com Flexbox.
• Organizar linhas e colunas com CSS Grid.
• Criar media queries a partir da necessidade do conteúdo.
• Preservar a ordem lógica e o acesso por teclado.
• Testar o site em diferentes larguras e com ampliação.

Aula 1 — Pensar do menor espaço para o maior

Um layout responsivo combina conteúdo flexível, imagens adaptáveis e regras que reorganizam a página quando o espaço deixa de ser suficiente. A abordagem mobile first começa com uma coluna simples e acrescenta possibilidades conforme a largura aumenta.

Confirme a configuração de viewport

O projeto já possui esta linha dentro de head. Ela faz a largura do documento acompanhar a largura disponível no dispositivo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Crie uma área central flexível

.container {
  width: min(70rem, calc(100% - 2rem));
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% impede a imagem de ultrapassar seu contêiner. Isso ajusta sua apresentação, mas não reduz os bytes transferidos; a otimização do arquivo WebP continua necessária.

Entregue uma imagem adequada ao espaço

srcset oferece arquivos de larguras diferentes. sizes informa quanto espaço a imagem tende a ocupar; com esses dados, o navegador escolhe uma candidata antes de baixar o arquivo.

<img
  src="img/ambiente-cafe-1024.webp"
  srcset="
    img/ambiente-cafe-640.webp 640w,
    img/ambiente-cafe-1024.webp 1024w,
    img/ambiente-cafe.webp 1536w
  "
  sizes="(max-width: 48rem) calc(100vw - 2rem), 70rem"
  alt="Salão do Café Aurora com mesas de madeira e plantas"
  width="1536"
  height="1024"
>

• Os valores 640w, 1024w e 1536w descrevem a largura real de cada arquivo.
• O navegador considera o espaço previsto e a densidade da tela; não é preciso escolher a imagem com JavaScript.
• Use picture quando a versão estreita precisar de outro recorte ou enquadramento, e não apenas de menos pixels. O Café Aurora mantém o mesmo enquadramento, por isso srcset é suficiente aqui.

Arquivos do exemplo: 640 px · 1024 px · 1536 px.

Aula 2 — Flexbox para organizar uma direção

Flexbox organiza os filhos diretos de um contêiner em uma direção principal: linha ou coluna. Ele é adequado para menu, grupos de botões, cabeçalhos e regiões em que o conteúdo determina o espaço ocupado.

Transforme a lista do menu em um contêiner flexível

.menu-lista {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .menu-lista {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

Um cabeçalho que aproveita o espaço

.cabecalho-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

Aula 3 — Grid para produtos em linhas e colunas

CSS Grid controla linhas e colunas ao mesmo tempo. Ele é a escolha natural para o cardápio, pois os produtos precisam formar uma grade alinhada quando houver espaço e voltar para uma coluna em telas estreitas.

.grade-produtos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .grade-produtos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .grade-produtos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

1fr cria uma coluna que ocupa o espaço disponível. repeat() evita repetição, enquanto minmax(0, 1fr) permite que as colunas encolham sem provocar estouro causado pelo conteúdo.

Veja a grade responder ao espaço

Cardápio do dia Feito com cuidado, servido perto de você

Baixe novamente se precisar: café coado · pão artesanal · bolo caseiro.

Uma alternativa fluida

Quando todos os cards podem ter uma largura mínima semelhante, o próprio Grid consegue criar e remover colunas sem media queries:

.grade-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.5rem;
}

Aula 4 — Media queries, formulário e testes de refluxo

Uma media query aplica regras somente quando determinada condição é atendida. Na abordagem mobile first, o CSS fora da consulta atende primeiro as telas estreitas; regras com min-width melhoram a organização quando há espaço.

.formulario-grade {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .formulario-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campo-largo {
    grid-column: 1 / -1;
  }
}

No celular, todos os campos ficam em uma coluna. A partir de 48rem, campos curtos podem ocupar duas colunas; a classe campo-largo faz mensagem e botão atravessarem a grade inteira.

Tipografia que cresce dentro de limites

.apresentacao h1 {
  font-size: clamp(2rem, 7vw, 4.5rem);
}

clamp() recebe um valor mínimo, um valor flexível e um máximo. O título cresce com a largura, mas nunca fica menor que 2rem nem maior que 4.5rem.

Procedimento de teste

1. Abra as ferramentas de desenvolvimento do navegador e ative o modo responsivo.
2. Teste larguras próximas de 320, 768 e 1280 CSS pixels, sem tratá-las como modelos específicos.
3. Arraste a largura lentamente entre esses pontos; problemas costumam aparecer nos intervalos.
4. Teste orientação vertical e horizontal.
5. Em uma janela de 1280 CSS pixels, amplie para 400% e confirme que o conteúdo reflui sem rolagem horizontal da página.
6. Percorra menu, links, campos e botões usando somente Tab e Shift + Tab.
7. Confirme que nenhuma informação desaparece quando a largura diminui.

Erros comuns para revisar

• Criar larguras fixas maiores que o espaço disponível.
• Escolher breakpoints copiando nomes de aparelhos.
• Usar Flexbox para forçar alinhamento de várias linhas e colunas.
• Usar Grid quando uma simples linha flexível resolveria.
• Esquecer flex-wrap em um menu com muitos itens.
• Reordenar visualmente o conteúdo e prejudicar teclado e leitores de tela.
• Ocultar conteúdo importante na versão estreita.
• Bloquear zoom ou reduzir demais a fonte para fazer tudo caber.
• Resolver estouro apenas com overflow-x: hidden.
• Testar somente em duas larguras prontas e ignorar os intervalos.

O que você vai aprender

• Explicar o papel do JavaScript em relação ao HTML e ao CSS.
• Conectar um arquivo script.js usando defer.
• Trabalhar com valores, variáveis, condições e funções simples.
• Localizar elementos no DOM e responder aos eventos click e input.
• Construir um filtro de cardápio acessível e um contador de caracteres.
• Usar o Console para observar mensagens e investigar erros.
• Preservar o funcionamento básico da página sem JavaScript.

Aula 1 — O primeiro arquivo JavaScript

Crie a pasta js e, dentro dela, o arquivo script.js. Antes do fechamento de body em cada página, conecte o arquivo:

<script src="js/script.js" defer></script>

src informa o caminho. defer permite que o navegador continue lendo o HTML e execute o script somente depois que o documento estiver analisado. Assim, o JavaScript encontra os elementos que precisa usar.

Confirme a conexão no Console

console.log("JavaScript do Café Aurora conectado.");

Salve o arquivo, recarregue a página e procure a mensagem. Um erro vermelho geralmente informa o arquivo e a linha onde o navegador encontrou o problema; comece a leitura pela primeira mensagem causada pelo seu código.

Valores e variáveis

const nomeDoCafe = "Café Aurora"; // texto
const quantidadeDeProdutos = 3;  // número
const estaAberto = true;         // verdadeiro ou falso
let filtroAtual = "todos";       // valor que poderá mudar

Use const quando a variável não será reatribuída e let quando seu valor precisará mudar. Nomes claros tornam o código mais fácil de explicar e revisar.

Condição e função

function informarAtendimento(estaAberto) {
  if (estaAberto) {
    return "Estamos abertos.";
  }

  return "Estamos fechados no momento.";
}

console.log(informarAtendimento(estaAberto));

Aula 2 — DOM e eventos

O navegador transforma o HTML em uma estrutura de objetos chamada DOM. JavaScript pode localizar um elemento nessa estrutura, ler ou alterar propriedades e reagir a ações da pessoa.

Acrescente um parágrafo de retorno ao HTML:

<p id="aviso-cardapio">Todos os produtos estão visíveis.</p>

Depois localize-o e altere seu texto quando um botão for acionado:

const aviso = document.querySelector("#aviso-cardapio");
const botao = document.querySelector("#botao-destaques");

if (aviso && botao) {
  botao.addEventListener("click", function () {
    aviso.textContent = "Mostrando os destaques da casa.";
  });
}

Aula 3 — Filtro acessível para o cardápio

Os filtros serão botões nativos. O rótulo de cada botão permanece estável e aria-pressed informa qual opção está ativa. Os controles começam ocultos e aparecem somente quando o JavaScript consegue prepará-los; sem script, todos os produtos continuam visíveis.

Experimente o resultado

Cardápio do Café Aurora

3 produtos encontrados.

Café coado

Bebida

Pão artesanal

Comida

Bolo de laranja

Comida

Prepare o HTML do projeto

<div class="filtros" role="group" aria-label="Filtrar produtos" data-filtros hidden>
  <span>Filtrar por:</span>
  <button type="button" data-filtro="todos" aria-pressed="true"
    aria-controls="lista-produtos">Todos</button>
  <button type="button" data-filtro="bebida" aria-pressed="false"
    aria-controls="lista-produtos">Bebidas</button>
  <button type="button" data-filtro="comida" aria-pressed="false"
    aria-controls="lista-produtos">Comidas</button>
</div>

<p data-status-filtro role="status"></p>

<div class="grade-produtos" id="lista-produtos">
  <article data-categoria="bebida">...</article>
  <article data-categoria="comida">...</article>
  <article data-categoria="comida">...</article>
</div>

Construa o comportamento por partes

const filtros = document.querySelector("[data-filtros]");
const botoesFiltro = document.querySelectorAll("[data-filtro]");
const produtos = document.querySelectorAll("[data-categoria]");
const statusFiltro = document.querySelector("[data-status-filtro]");

function filtrarProdutos(categoria) {
  let quantidadeVisivel = 0;

  produtos.forEach(function (produto) {
    const deveMostrar = categoria === "todos" ||
      produto.dataset.categoria === categoria;

    produto.hidden = !deveMostrar;
    if (deveMostrar) quantidadeVisivel += 1;
  });

  const complemento = quantidadeVisivel === 1 ?
    "produto encontrado" : "produtos encontrados";
  statusFiltro.textContent = `${quantidadeVisivel} ${complemento}.`;
}

botoesFiltro.forEach(function (botao) {
  botao.addEventListener("click", function () {
    botoesFiltro.forEach(function (item) {
      item.setAttribute("aria-pressed", "false");
    });

    botao.setAttribute("aria-pressed", "true");
    filtrarProdutos(botao.dataset.filtro);
  });
});

const filtros = document.querySelector("[data-filtros]");
const botoesFiltro = document.querySelectorAll("[data-filtro]");
const produtos = document.querySelectorAll("[data-categoria]");
const statusFiltro = document.querySelector("[data-status-filtro]");

if (filtros && botoesFiltro.length && produtos.length && statusFiltro) {
  function filtrarProdutos(categoria) {
    let quantidadeVisivel = 0;

    produtos.forEach(function (produto) {
      const deveMostrar = categoria === "todos" ||
        produto.dataset.categoria === categoria;

      produto.hidden = !deveMostrar;
      if (deveMostrar) quantidadeVisivel += 1;
    });

    const complemento = quantidadeVisivel === 1 ?
      "produto encontrado" : "produtos encontrados";
    statusFiltro.textContent = `${quantidadeVisivel} ${complemento}.`;
  }

  botoesFiltro.forEach(function (botao) {
    botao.addEventListener("click", function () {
      botoesFiltro.forEach(function (item) {
        item.setAttribute("aria-pressed", "false");
      });

      botao.setAttribute("aria-pressed", "true");
      filtrarProdutos(botao.dataset.filtro);
    });
  });

  filtros.hidden = false;
  filtrarProdutos("todos");
}

Aula 4 — Contador de caracteres e revisão

O evento input acontece quando o valor de um campo muda. Usaremos value.length para contar caracteres e textContent para atualizar uma orientação já associada ao campo.

Atualize o HTML do formulário

<label for="mensagem">Mensagem (obrigatória)</label>
<p id="ajuda-mensagem">Escreva entre 10 e 500 caracteres.</p>
<textarea id="mensagem" name="mensagem" minlength="10" maxlength="500"
  aria-describedby="ajuda-mensagem contador-mensagem" required></textarea>
<p id="contador-mensagem">0 de 500 caracteres</p>

Escute cada alteração

const mensagem = document.querySelector("#mensagem");
const contador = document.querySelector("#contador-mensagem");

if (mensagem && contador) {
  mensagem.addEventListener("input", function () {
    const quantidade = mensagem.value.length;
    contador.textContent = `${quantidade} de 500 caracteres`;
  });
}

Procedimento final de teste

1. Recarregue a página com o Console aberto e corrija o primeiro erro causado pelo seu script.
2. Use Tab, Espaço e Enter para operar todos os filtros sem mouse.
3. Confirme que somente os cards esperados ficam visíveis e que o status apresenta a quantidade.
4. Digite, apague e cole texto no campo; o contador deve acompanhar as três ações.
5. Teste o site sem JavaScript e confirme que conteúdo, links e formulário básico permanecem utilizáveis.

Erros comuns para revisar

• Escrever um caminho incorreto para script.js ou esquecer de salvar o arquivo.
• Confundir =, usado para atribuição, com ===, usado para comparação estrita.
• Usar um seletor que não corresponde ao HTML e tentar acessar uma propriedade de null.
• Chamar a função no lugar de entregá-la ao evento: addEventListener("click", filtrar()).
• Alterar o rótulo de um botão pressionado em vez de atualizar seu estado.
• Esconder todos os produtos no HTML e tornar o conteúdo dependente de JavaScript.
• Usar innerHTML quando apenas textContent é necessário.
• Testar somente com o mouse e ignorar Console, teclado e funcionamento sem script.

O que você vai aprender

• Criar arrays e acessar itens por posição.
• Consultar length e acrescentar um item com push().
• Representar um produto com propriedades de um objeto.
• Percorrer uma coleção com for...of e forEach().
• Usar filter() e find() em necessidades simples.
• Calcular a quantidade e o total de uma seleção.
• Inspecionar coleções com console.table().

Aula 1 — Arrays: vários valores em uma coleção

Um array guarda uma sequência de valores em uma única variável. Os colchetes delimitam a coleção e as vírgulas separam seus itens:

const nomesDosProdutos = [
  "Café coado",
  "Pão artesanal",
  "Bolo de laranja"
];

As posições começam em zero. Portanto, nomesDosProdutos[0] contém o primeiro nome e nomesDosProdutos[2] contém o terceiro.

console.log(nomesDosProdutos[0]); // Café coado
console.log(nomesDosProdutos.length); // 3

nomesDosProdutos.push("Capuccino");
console.log(nomesDosProdutos.length); // 4

Aula 2 — Objetos: dados que pertencem ao mesmo produto

Um nome isolado não informa categoria nem preço. Um objeto reúne dados relacionados em pares formados por propriedade e valor:

const cafeCoado = {
  id: "cafe-coado",
  nome: "Café coado",
  categoria: "bebida",
  preco: 8,
  disponivel: true
};

A notação de ponto acessa uma propriedade conhecida. A notação de colchetes é útil quando o nome da propriedade vem de uma variável.

console.log(cafeCoado.nome); // Café coado
console.log(cafeCoado.preco); // 8

const propriedade = "categoria";
console.log(cafeCoado[propriedade]); // bebida

Combine array e objetos

const produtos = [
  { id: "cafe-coado", nome: "Café coado", categoria: "bebida", preco: 8 },
  { id: "pao-artesanal", nome: "Pão artesanal", categoria: "comida", preco: 12 },
  { id: "bolo-laranja", nome: "Bolo de laranja", categoria: "comida", preco: 9 }
];

console.table(produtos);

console.table() apresenta o array de objetos em linhas e colunas no Console. É uma ferramenta de inspeção; não altera a página.

Aula 3 — Repetir, filtrar e localizar

Quando a mesma ação deve alcançar todos os itens, uma repetição evita copiar e colar comandos. for...of deixa explícito que cada produto da coleção será visitado:

for (const produto of produtos) {
  console.log(`${produto.nome}: R$ ${produto.preco}`);
}

O método forEach() também executa uma função para cada item. Ele já apareceu no filtro do capítulo anterior:

produtos.forEach(function (produto) {
  console.log(produto.nome);
});

const bebidas = produtos.filter(function (produto) {
  return produto.categoria === "bebida";
});

const produtoEscolhido = produtos.find(function (produto) {
  return produto.id === "pao-artesanal";
});

console.log(bebidas);
console.log(produtoEscolhido);

Aula 4 — Aplicação: simulação de pedido

Agora a coleção será usada para localizar cada item marcado e somar os preços. Esta é uma simulação local: ela não envia nem reserva um pedido.

Monte um pedido de teste

Marque produtos para calcular o total. Nenhum pedido será enviado.

Imagens usadas no experimento: café coado · pão artesanal · bolo de laranja.

Prepare a estrutura

<fieldset data-pedido hidden>
  <legend>Simulação de pedido</legend>
  <label><input type="checkbox" value="cafe-coado" data-item-pedido>
    Café coado — R$ 8,00</label>
  <label><input type="checkbox" value="pao-artesanal" data-item-pedido>
    Pão artesanal — R$ 12,00</label>
  <label><input type="checkbox" value="bolo-laranja" data-item-pedido>
    Bolo de laranja — R$ 9,00</label>
</fieldset>
<p data-resumo-pedido role="status"></p>
<button type="button" data-limpar-pedido hidden>Limpar seleção</button>

Calcule por etapas

function calcularPedido() {
  let quantidade = 0;
  let total = 0;

  for (const item of itensPedido) {
    if (!item.checked) continue;

    const produto = produtos.find(function (produto) {
      return produto.id === item.value;
    });

    if (!produto) continue;
    quantidade += 1;
    total += produto.preco;
  }

  const rotulo = quantidade === 1 ? "item" : "itens";
  resumoPedido.textContent = quantidade === 0
    ? "Nenhum produto selecionado."
    : `${quantidade} ${rotulo} — ${formatarPreco(total)}`;
}

function formatarPreco(valor) {
  return valor.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL"
  });
}

const produtos = [
  { id: "cafe-coado", nome: "Café coado", categoria: "bebida", preco: 8 },
  { id: "pao-artesanal", nome: "Pão artesanal", categoria: "comida", preco: 12 },
  { id: "bolo-laranja", nome: "Bolo de laranja", categoria: "comida", preco: 9 }
];

const pedido = document.querySelector("[data-pedido]");
const itensPedido = document.querySelectorAll("[data-item-pedido]");
const resumoPedido = document.querySelector("[data-resumo-pedido]");
const limparPedido = document.querySelector("[data-limpar-pedido]");

if (pedido && itensPedido.length && resumoPedido && limparPedido) {
  function formatarPreco(valor) {
    return valor.toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL"
    });
  }

  function calcularPedido() {
    let quantidade = 0;
    let total = 0;

    for (const item of itensPedido) {
      if (!item.checked) continue;

      const produto = produtos.find(function (produto) {
        return produto.id === item.value;
      });

      if (!produto) continue;
      quantidade += 1;
      total += produto.preco;
    }

    const rotulo = quantidade === 1 ? "item" : "itens";
    resumoPedido.textContent = quantidade === 0
      ? "Nenhum produto selecionado."
      : `${quantidade} ${rotulo} — ${formatarPreco(total)}`;
  }

  itensPedido.forEach(function (item) {
    item.addEventListener("change", calcularPedido);
  });

  limparPedido.addEventListener("click", function () {
    itensPedido.forEach(function (item) {
      item.checked = false;
    });
    calcularPedido();
  });

  pedido.hidden = false;
  limparPedido.hidden = false;
  calcularPedido();
}

Erros comuns para revisar

• Esperar que a primeira posição de um array seja 1.
• Acessar uma propriedade inexistente e não investigar o valor undefined.
• Repetir manualmente comandos que deveriam percorrer a coleção.
• Modificar o array enquanto ele está sendo percorrido sem compreender o efeito.
• Usar filter() quando precisa de somente um item.
• Usar o resultado de find() sem verificar se algo foi encontrado.
• Guardar preços como textos contendo R$ em vez de números.
• Apresentar a simulação como se fosse um pedido realmente enviado.

O que você vai aprender

• Explicar o que é JSON e reconhecer suas regras básicas.
• Criar e validar o arquivo produtos.json.
• Entender requisição, resposta, método GET e códigos 200 e 404.
• Usar fetch(), async e await.
• Verificar response.ok antes de ler os dados.
• Tratar falhas com try...catch.
• Representar carregamento, sucesso e erro de forma compreensível.
• Inspecionar a requisição no painel Network.

Aula 1 — Separando os dados com JSON

JSON é um formato textual usado para representar dados estruturados. Ele se parece com objetos e arrays de JavaScript, mas possui regras próprias e não executa comandos.

Crie a pasta dados e o arquivo produtos.json:

[
  {
    "id": "cafe-coado",
    "nome": "Café coado",
    "categoria": "bebida",
    "preco": 8,
    "imagem": "cafe-coado.webp",
    "alt": "Xícara de café coado ao lado de uma pequena jarra",
    "descricao": "Preparado na hora com grãos selecionados."
  },
  {
    "id": "pao-artesanal",
    "nome": "Pão artesanal",
    "categoria": "comida",
    "preco": 12,
    "imagem": "pao-artesanal.webp",
    "alt": "Pão artesanal cortado sobre uma mesa de madeira",
    "descricao": "Fermentação lenta e produção diária."
  },
  {
    "id": "bolo-laranja",
    "nome": "Bolo de laranja",
    "categoria": "comida",
    "preco": 9,
    "imagem": "bolo-caseiro.webp",
    "alt": "Bolo caseiro de laranja com uma fatia servida",
    "descricao": "Receita da casa com laranjas frescas."
  }
]

Baixar o arquivo produtos.json do Café Aurora.

Aula 2 — Requisição, resposta e código assíncrono

fetch() faz uma requisição HTTP e devolve uma Promise: um objeto que representa um resultado que chegará depois. Uma função marcada com async pode usar await para aguardar cada etapa sem bloquear toda a página.

Faça a primeira busca

async function carregarProdutos() {
  const resposta = await fetch("dados/produtos.json");
  const produtos = await resposta.json();
  console.table(produtos);
}

carregarProdutos();

Confira no painel Network

Aula 3 — Verificar e tratar respostas

fetch() pode receber uma resposta 404 sem entrar automaticamente no tratamento de erro. Por isso, verifique response.ok, que será verdadeiro para respostas na faixa de sucesso.

async function carregarProdutos() {
  try {
    const resposta = await fetch("dados/produtos.json");

    if (!resposta.ok) {
      throw new Error(`Falha HTTP: ${resposta.status}`);
    }

    const produtos = await resposta.json();
    console.table(produtos);
  } catch (erro) {
    console.error("Não foi possível carregar os produtos:", erro);
  }
}

try delimita as etapas que podem falhar. throw cria uma falha quando a resposta HTTP não é satisfatória. catch recebe o erro para registro e recuperação da interface.

Represente cada estado

const statusCarregamento = document.querySelector("[data-status-carregamento]");

statusCarregamento.textContent = "Atualizando o cardápio...";

// Depois do sucesso:
statusCarregamento.textContent = `Cardápio atualizado: ${produtos.length} produtos.`;

// Dentro de catch:
statusCarregamento.textContent =
  "Não foi possível atualizar. Exibindo a versão disponível.";

Aula 4 — Atualizando o cardápio com segurança

Criaremos os elementos com métodos do DOM e preencheremos conteúdo com textContent. Assim, os dados são tratados como texto e não como marcação HTML executável.

Experimente uma busca real

Prepare o HTML

<p data-status-carregamento role="status">
  Cardápio disponível.
</p>

<div class="grade-produtos" id="lista-produtos">
  <!-- Preserve aqui os cards básicos construídos em HTML. -->
</div>

Crie um card sem usar innerHTML

function criarCard(produto) {
  const card = document.createElement("article");
  const titulo = document.createElement("h3");
  const imagem = document.createElement("img");
  const descricao = document.createElement("p");
  const preco = document.createElement("strong");

  card.dataset.categoria = produto.categoria;
  titulo.textContent = produto.nome;
  imagem.src = `img/${produto.imagem}`;
  imagem.alt = produto.alt;
  descricao.textContent = `${produto.descricao} `;
  preco.textContent = produto.preco.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL"
  });

  descricao.append(preco);
  card.append(titulo, imagem, descricao);
  return card;
}

function apresentarProdutos(produtos) {
  const fragmento = document.createDocumentFragment();

  produtos.forEach(function (produto) {
    fragmento.append(criarCard(produto));
  });

  listaProdutos.replaceChildren(fragmento);
}

let produtos = [];
const listaProdutos = document.querySelector("#lista-produtos");
const statusCarregamento = document.querySelector("[data-status-carregamento]");

function criarCard(produto) {
  const card = document.createElement("article");
  const titulo = document.createElement("h3");
  const imagem = document.createElement("img");
  const descricao = document.createElement("p");
  const preco = document.createElement("strong");

  card.dataset.categoria = produto.categoria;
  titulo.textContent = produto.nome;
  imagem.src = `img/${produto.imagem}`;
  imagem.alt = produto.alt;
  imagem.width = 960;
  imagem.height = 640;
  imagem.loading = "lazy";
  descricao.textContent = `${produto.descricao} `;
  preco.textContent = produto.preco.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL"
  });

  descricao.append(preco);
  card.append(titulo, imagem, descricao);
  return card;
}

function apresentarProdutos(produtos) {
  const fragmento = document.createDocumentFragment();
  produtos.forEach(function (produto) {
    fragmento.append(criarCard(produto));
  });
  listaProdutos.replaceChildren(fragmento);
}

async function carregarProdutos() {
  if (!listaProdutos || !statusCarregamento) return;
  statusCarregamento.textContent = "Atualizando o cardápio...";

  try {
    const resposta = await fetch("dados/produtos.json");
    if (!resposta.ok) {
      throw new Error(`Falha HTTP: ${resposta.status}`);
    }

    const dados = await resposta.json();
    if (!Array.isArray(dados) || dados.length === 0) {
      throw new TypeError("A resposta não contém uma lista válida de produtos.");
    }

    produtos = dados;
    apresentarProdutos(produtos);
    statusCarregamento.textContent =
      `Cardápio atualizado: ${produtos.length} produtos.`;
  } catch (erro) {
    console.error("Não foi possível carregar os produtos:", erro);
    statusCarregamento.textContent =
      "Não foi possível atualizar. Exibindo a versão disponível.";
  }
}

carregarProdutos();

Reutilize os dados na simulação de pedido

Substitua o array fixo do capítulo anterior por let produtos = []. Mostre a simulação somente depois do sucesso da busca, quando o cálculo já puder localizar os produtos recebidos:

produtos = dados;
apresentarProdutos(produtos);

pedido.hidden = false;
limparPedido.hidden = false;
calcularPedido();

Erros comuns para revisar

• Usar aspas simples, comentários ou vírgula final dentro do JSON.
• Abrir a página com file:// e esperar que a busca funcione como em um servidor.
• Esquecer que fetch() e response.json() são assíncronos.
• Não verificar response.ok antes de ler o corpo.
• Ocultar o cardápio básico antes de saber se a busca funcionou.
• Mostrar detalhes técnicos do erro para o visitante.
• Usar no-cors como tentativa de corrigir uma API que não permite acesso.
• Inserir dados recebidos diretamente com innerHTML.

O que você vai aprender

• Explicar quando um dado precisa continuar disponível após o recarregamento.
• Distinguir localStorage de sessionStorage.
• Usar setItem(), getItem() e removeItem().
• Converter arrays com JSON.stringify() e JSON.parse().
• Salvar e restaurar a seleção do pedido sem duplicar os dados dos produtos.
• Tratar armazenamento indisponível ou conteúdo inválido sem interromper a página.
• Inspecionar chaves e valores no painel Application do DevTools.

Aula 1 — Dados que permanecem no navegador

A Web Storage API oferece espaços de armazenamento formados por pares de chave e valor. Tanto a chave quanto o valor são gravados como texto e ficam separados por origem — combinação de protocolo, domínio e porta.

Comece com um valor textual no Console:

localStorage.setItem("cafeAurora:filtro", "comida");

const filtroSalvo = localStorage.getItem("cafeAurora:filtro");
console.log(filtroSalvo);

localStorage.removeItem("cafeAurora:filtro");

Esse dado pertence àquele navegador, perfil, dispositivo e origem. Ele não vira cadastro, não acompanha automaticamente a pessoa em outro aparelho e pode ser apagado nas configurações do navegador.

Aula 2 — Convertendo a seleção com JSON

O pedido contém vários identificadores, mas o armazenamento aceita texto. JSON.stringify() transforma o array em texto; JSON.parse() reconstrói o array quando o dado é lido.

const selecionados = ["cafe-coado", "bolo-laranja"];
const texto = JSON.stringify(selecionados);

localStorage.setItem("cafeAurora:pedido", texto);

const registro = localStorage.getItem("cafeAurora:pedido");
const pedidoSalvo = JSON.parse(registro);

console.log(pedidoSalvo);

Experimente no próprio módulo

Aula 3 — Salvando o pedido do Café Aurora

No arquivo cardapio.html, acrescente uma mensagem específica depois do resumo do pedido:

<p class="status-persistencia"
   data-status-persistencia
   role="status">
  Nenhum pedido salvo neste navegador.
</p>

No início da parte do pedido em script.js, selecione essa mensagem e defina uma chave clara:

const CHAVE_PEDIDO = "cafeAurora:pedido";
const statusPersistencia = document.querySelector(
  "[data-status-persistencia]"
);

Obtenha somente os identificadores marcados

function obterIdsSelecionados() {
  return Array.from(itensPedido)
    .filter(function (item) {
      return item.checked;
    })
    .map(function (item) {
      return item.value;
    });
}

Grave uma seleção pequena

function salvarPedido() {
  const ids = obterIdsSelecionados();

  try {
    if (ids.length === 0) {
      localStorage.removeItem(CHAVE_PEDIDO);
      statusPersistencia.textContent =
        "Nenhum pedido salvo neste navegador.";
      return;
    }

    localStorage.setItem(CHAVE_PEDIDO, JSON.stringify(ids));
    statusPersistencia.textContent =
      "Pedido salvo neste navegador.";
  } catch (erro) {
    console.error("Não foi possível salvar o pedido:", erro);
    statusPersistencia.textContent =
      "A seleção funciona, mas não pôde ser salva.";
  }
}

O try...catch é necessário porque o navegador ou suas configurações podem impedir o armazenamento. Mesmo nesse caso, a seleção e o cálculo continuam funcionando durante a visita atual.

Aula 4 — Restaurando, validando e inspecionando

Um valor salvo pode estar ausente, antigo ou inválido. Antes de marcar os campos, confirme que o conteúdo reconstruído é um array de textos. Identificadores que não existem mais no cardápio serão simplesmente ignorados.

function restaurarPedido() {
  try {
    const registro = localStorage.getItem(CHAVE_PEDIDO);
    if (!registro) return;

    const ids = JSON.parse(registro);
    const listaValida = Array.isArray(ids) &&
      ids.every(function (id) {
        return typeof id === "string";
      });

    if (!listaValida) {
      throw new TypeError("O pedido salvo não possui o formato esperado.");
    }

    let quantidadeRestaurada = 0;
    itensPedido.forEach(function (item) {
      item.checked = ids.includes(item.value);
      if (item.checked) quantidadeRestaurada += 1;
    });

    statusPersistencia.textContent = quantidadeRestaurada > 0
      ? "Pedido anterior restaurado."
      : "O pedido salvo não contém produtos atuais.";
  } catch (erro) {
    console.error("Não foi possível restaurar o pedido:", erro);
    statusPersistencia.textContent =
      "O pedido salvo não pôde ser lido. Faça uma nova seleção.";
  }
}

Conecte a persistência aos eventos existentes

Substitua o bloco antigo que registrava os eventos de mudança e limpeza por esta versão:

itensPedido.forEach(function (item) {
  item.addEventListener("change", function () {
    calcularPedido();
    salvarPedido();
  });
});

limparPedido.addEventListener("click", function () {
  itensPedido.forEach(function (item) {
    item.checked = false;
  });
  calcularPedido();
  salvarPedido();
});

Como o pedido depende dos produtos carregados no capítulo anterior, restaure a seleção somente depois do sucesso do fetch():

pedido.hidden = false;
limparPedido.hidden = false;
restaurarPedido();
calcularPedido();

const CHAVE_PEDIDO = "cafeAurora:pedido";
const statusPersistencia = document.querySelector(
  "[data-status-persistencia]"
);

function obterIdsSelecionados() {
  return Array.from(itensPedido)
    .filter(function (item) {
      return item.checked;
    })
    .map(function (item) {
      return item.value;
    });
}

function salvarPedido() {
  const ids = obterIdsSelecionados();

  try {
    if (ids.length === 0) {
      localStorage.removeItem(CHAVE_PEDIDO);
      statusPersistencia.textContent =
        "Nenhum pedido salvo neste navegador.";
      return;
    }

    localStorage.setItem(CHAVE_PEDIDO, JSON.stringify(ids));
    statusPersistencia.textContent =
      "Pedido salvo neste navegador.";
  } catch (erro) {
    console.error("Não foi possível salvar o pedido:", erro);
    statusPersistencia.textContent =
      "A seleção funciona, mas não pôde ser salva.";
  }
}

function restaurarPedido() {
  try {
    const registro = localStorage.getItem(CHAVE_PEDIDO);
    if (!registro) return;

    const ids = JSON.parse(registro);
    const listaValida = Array.isArray(ids) &&
      ids.every(function (id) {
        return typeof id === "string";
      });

    if (!listaValida) {
      throw new TypeError("O pedido salvo não possui o formato esperado.");
    }

    let quantidadeRestaurada = 0;
    itensPedido.forEach(function (item) {
      item.checked = ids.includes(item.value);
      if (item.checked) quantidadeRestaurada += 1;
    });
    statusPersistencia.textContent = quantidadeRestaurada > 0
      ? "Pedido anterior restaurado."
      : "O pedido salvo não contém produtos atuais.";
  } catch (erro) {
    console.error("Não foi possível restaurar o pedido:", erro);
    statusPersistencia.textContent =
      "O pedido salvo não pôde ser lido. Faça uma nova seleção.";
  }
}

if (pedido && itensPedido.length && resumoPedido &&
    limparPedido && statusPersistencia) {
  itensPedido.forEach(function (item) {
    item.addEventListener("change", function () {
      calcularPedido();
      salvarPedido();
    });
  });

  limparPedido.addEventListener("click", function () {
    itensPedido.forEach(function (item) {
      item.checked = false;
    });
    calcularPedido();
    salvarPedido();
  });
}

Confira no painel Application

O projeto em um servidor local e o site publicado possuem origens diferentes. Portanto, um pedido salvo durante o desenvolvimento não aparecerá automaticamente no endereço público.

Erros comuns para revisar

• Tentar salvar um array diretamente e obter um texto inadequado.
• Chamar JSON.parse() quando getItem() devolveu null.
• Salvar preços e descrições que já pertencem ao arquivo JSON.
• Usar uma chave genérica como dados ou pedido.
• Usar clear() e apagar dados de outras partes do site.
• Restaurar a seleção antes de os produtos necessários terem sido carregados.
• Confiar no armazenamento como lugar seguro para dados sensíveis.

O que você vai aprender

• Definir critérios objetivos para considerar o site pronto.
• Testar navegação, teclado, ampliação, responsividade e jornadas completas.
• Validar todas as páginas HTML e interpretar erros simples.
• Usar Console, Network, Application e Lighthouse com finalidade clara.
• Distinguir verificação automática de teste manual.
• Publicar um site estático pelo GitHub Pages.
• Repetir os testes essenciais no endereço público.

Aula 1 — Definindo quando o site está pronto

Um projeto está pronto para publicação quando atende a critérios verificáveis. “Parece bom” é uma percepção útil, mas não substitui a confirmação de que os caminhos principais funcionam.

Complete a acessibilidade de todas as páginas

O módulo já possui um link “Pular para o conteúdo”. Aplique a mesma solução ao Café Aurora: coloque o link como primeiro elemento dentro de body e identifique o conteúdo principal.

<body>
  <a class="skip-link" href="#conteudo">
    Pular para o conteúdo
  </a>

  <header>...</header>
  <main id="conteudo" tabindex="-1">
    ...
  </main>
</body>

.skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 10;
  padding: .65rem .9rem;
  color: #fff;
  background: #1b1b1b;
  border-radius: .4rem;
}

.skip-link:focus {
  top: 1rem;
}

tabindex="-1" permite que o destino receba foco quando o link é acionado, sem acrescentá-lo à sequência normal da tecla Tab.

Aula 2 — Validando código e investigando falhas

Use o validador de HTML do W3C. Enquanto o projeto estiver local, escolha o envio de arquivo e valide separadamente index.html, cardapio.html, sobre.html e contato.html.

Use cada painel para uma pergunta

Aula 3 — Usando Lighthouse sem depender da nota

O Lighthouse executa verificações automáticas de desempenho, acessibilidade, boas práticas e SEO. Ele ajuda a encontrar indícios, mas não consegue decidir sozinho se o texto é claro, se a jornada faz sentido ou se todo o site funciona apenas com teclado.

Como interpretar o relatório

1. Leia a descrição da verificação, não apenas a pontuação.
2. Comece pelos problemas que afetam acesso, carregamento ou compreensão.
3. Faça uma alteração por vez e confirme que ela não prejudicou outra parte.
4. Execute novamente e registre o que realmente melhorou.

Aula 4 — Publicando com GitHub Pages

O Café Aurora é um site estático: o navegador recebe HTML, CSS, JavaScript, JSON e imagens. O GitHub Pages consegue publicar esses arquivos sem servidor próprio. O formulário permanece demonstrativo porque ainda não existe um serviço para receber mensagens.

Faça a revisão antes do envio

• mantenha index.html na raiz do projeto;
• preserve as pastas css, js, dados e img;
• confira letras maiúsculas e minúsculas nos nomes dos arquivos;
• remova senhas, documentos e qualquer dado pessoal real;
• não envie arquivos temporários ou imagens que o site não utiliza.

Publique a partir da branch principal

1. Crie no GitHub um repositório público chamado cafe-aurora.
2. Envie o conteúdo da pasta do projeto e registre a alteração na branch main. O arquivo index.html deve aparecer na raiz do repositório, não dentro de outra pasta.
3. Abra Settings → Pages.
4. Em Build and deployment, escolha Deploy from a branch.
5. Selecione main, a pasta /(root) e salve.
6. Aguarde a publicação e use o botão Visit site quando aparecer.

Repita os testes no endereço público

Abra todas as páginas pelo endereço publicado, confira Console e Network, teste o cardápio, o formulário e o pedido. O localStorage do servidor local não é o mesmo do domínio público; faça uma nova seleção para testar a persistência na nova origem.

Erros comuns para revisar

• Testar somente a página inicial e esquecer as demais jornadas.
• Corrigir vários pontos ao mesmo tempo e não saber qual mudança causou regressão.
• Considerar a pontuação do Lighthouse como garantia de acessibilidade.
• Publicar uma pasta sem index.html na raiz escolhida.
• Usar caminhos que funcionam no computador, mas não respeitam maiúsculas e minúsculas no servidor.
• Esquecer de testar novamente o Fetch e o Web Storage no domínio público.
• Enviar credenciais ou dados reais para um repositório público.