Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

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 */
2

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.

3

I still can’t fix the error

4

Can you share your updated code please?

5

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>
6

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.

7

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

8

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

1 Like
9

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.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.