Passo 4

Instruções

Abaixo do título principal da página, há uma seção de navegação que contém links para cada post do blog. Esta seção deve ser envolvida em um elemento nav para indicar seu propósito como um marco de navegação.

O que fazer:

Testes:

Sua página deve ter um elemento `nav`.
Seu `<h2>Navigation</h2>` deve estar dentro do elemento `nav`.
Seu elemento `ul` deve estar dentro do elemento `nav`.
Seus elementos `li` devem estar dentro do elemento `ul`.
Você não deve adicionar elementos adicionais `ul`, `li` ou `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>
    <h2 id="post1">My Journey Learning to Code</h2>
    <p>I started learning to code a few months ago and it's been a wild ride!</p>
    
    <h3>Early Challenges</h3>
    <p>At first, syntax was really confusing.</p>
    
    <h3>Breakthroughs</h3>
    <p>Eventually things started to click.</p>
  </div>

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

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

  <div>
    <h2 id="post3">What's Next?</h2>
    <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