Passo 1

Instruções

Camperbot criou uma página de blog sobre jornada de codificação, mas parece que a página tem alguns problemas de acessibilidade e práticas inadequadas. Seu trabalho neste workshop é corrigir esses problemas para Camperbot. O primeiro conjunto de erros está relacionado ao uso de headings. Em uma lição anterior, você aprendeu que a melhor prática é usar apenas um h1 por página. Mas parece que o Camperbot está usando vários h1s. Deixe o <h1>Welcome to Camperbot's Blog</h1> como está e altere os outros elementos h1 para elementos h2.

O que fazer:

Testes:

Você não deve alterar o `<h1>Welcome to Camperbot's Blog</h1>`.
Você deve alterar o elemento `h1` com o texto `My Journey Learning to Code` para um elemento `h2`.
Você deve alterar o elemento `h1` com o texto `Accessibility Matters` para um elemento `h2`.
Você deve alterar o elemento `h1` com o texto `What's Next?` para um elemento `h2`.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Camperbot's Blog</title>
</head>
<body>
  <h1>Welcome to Camperbot's Blog</h1>

  <h2>Navigation</h2>
  <ul>
    <li><a href="#post1">My Journey</a></li>
    <li><a href="#post2">Accessibility</a></li>
    <li><a href="#post3">Next Steps</a></li>
  </ul>

  <div>
    <h1 id="post1">My Journey Learning to Code</h1>
    <p>I started learning to code a few months ago and it's been a wild ride!</p>
    
    <h4>Early Challenges</h4>
    <p>At first, syntax was really confusing.</p>
    
    <h4>Breakthroughs</h4>
    <p>Eventually things started to click.</p>
  </div>

  <div>
    <h1 id="post2">Accessibility Matters</h1>
    <p>Today I learned that not everyone uses the web the same way I do.</p>

    <h5>Screen Readers</h5>
    <p>These tools help visually impaired users browse websites.</p>
  </div>

  <div>
    <h1 id="post3">What's Next?</h1>
    <p>I'm excited to dive into JavaScript and build interactive features!</p>

    <h3>Coming soon: My first JavaScript project!</h3>
    <p>Stay tuned for some exciting interactive blog features.</p>
  </div>

  <h3>Contact Me</h3>
  <p>Email me at camperbot@blog.io</p>
</body>
</html>

Preview