Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I can’t find the error.

" Your “#navbar” should have exactly one header element within it."

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Documentation</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<main id='main-doc'>
  <section id='Pruebas_Manuales' class='main-section'>
    <header>Pruebas Manuales</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <nav id='navbar'>
      <header>Pruebas Manuales</header>
      <a href="#Pruebas_Manuales" class='nav-link'>Pruebas Manuales</a>
    </nav>
  </section>
  <section id='Pruebas_Automatizadas'class='main-section'>
    <header>Pruebas Automatizadas</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <nav id='navbar'>
      <header>Pruebas Automatizadas</header>
      <a href="#Pruebas_Automatizadas" class='nav-link'>Pruebas Automatizadas</a>
    </nav>
  </section>
  <section id='Prueba_de_Rendimiento' class='main-section'>
    <header>Prueba de Rendimiento</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <nav id='navbar'>
      <header>Prueba de Rendimiento</header>
      <a href="#Prueba_de_Rendimiento" class='nav-link'>Prueba de Rendimiento</a>
    </nav>
  </section>
  <section id='Prueba_de_Seguridad' class='main-section'>
    <header>Prueba de Seguridad</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <nav id='navbar'>
      <header>Prueba de Seguridad</header>
      <a href="#Prueba_de_Seguridad" class='nav-link'>Prueba de Seguridad</a>
    </nav>
  </section>
  <section id='Pruebas_de_stress' class='main-section'>
    <header>Pruebas de stress</header>
    <p></p>
    <p></p> 
    <code></code> 
    <li></li>
    <nav id='navbar'>
      <header>Pruebas de stress</header>
      <a href="#Pruebas_de_stress" class='nav-link'>Pruebas de stress</a>
    </nav>
  </section>
</main>
</html>
/* file: styles.css */

You have several nav elements, with the id ‘navbar’. Ids must be unique. For this project, you should probably only have one nav element anyhow.

I still can’t fix the error

Can you share your updated code please?

The Error is now: " All your .nav-link elements must be in the #navbar. "

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Documentation</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<main id='main-doc'>
  <section id='Pruebas_Manuales' class='main-section'>
    <header>Pruebas Manuales</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <nav id='navbar'>
      <header>Pruebas Manuales</header>
      <a href="#Pruebas_Manuales" class='nav-link'>Pruebas Manuales</a>
    </nav>
  </section>
  <section id='Pruebas_Automatizadas'class='main-section'>
    <header>Pruebas Automatizadas</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <nav id='Pruebas_Automatizadas'>
      <header>Pruebas Automatizadas</header>
      <a href="#Pruebas_Automatizadas" class='nav-link'>Pruebas Automatizadas</a>
    </nav>
  </section>
  <section id='Prueba_de_Rendimiento' class='main-section'>
    <header>Prueba de Rendimiento</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <nav id='Prueba_de_Rendimiento'>
      <header>Prueba de Rendimiento</header>
      <a href="#Prueba_de_Rendimiento" class='nav-link'>Prueba de Rendimiento</a>
    </nav>
  </section>
  <section id='Prueba_de_Seguridad' class='main-section'>
    <header>Prueba de Seguridad</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <nav id='Prueba_de_Seguridad'>
      <header>Prueba de Seguridad</header>
      <a href="#Prueba_de_Seguridad" class='nav-link'>Prueba de Seguridad</a>
    </nav>
  </section>
  <section id='Pruebas_de_stress' class='main-section'>
    <header>Pruebas de stress</header>
    <p></p>
    <p></p> 
    <code></code> 
    <li></li>
    <nav id='Pruebas_de_stress'>
      <header>Pruebas de stress</header>
      <a href="#Pruebas_de_stress" class='nav-link'>Pruebas de stress</a>
    </nav>
  </section>
</main>
</html>

Could you edit your post please and paste all of your code within backticks?
Click on the </> icon (or CTRL+e) and paste all of the code where indicated.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Hi! I used my mod powers to format the code. :slight_smile:

1 Like

Why do you have several nav elements? You should only have one (with id='navbar'). Within that you should have all of your .nav-link elements.

If you look at the example project, you will see one navbar, on the left of the screen. You should be trying to recreate something similar to this.