Technical Documentation Page

Hello campers!

I’m having a little trouble with this step.

Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).

This is the code I’ve written:

<body>
      <nav id="navbar">
        <header>
         <h1>Solidity Documentation</h1>
         <ul>
           <li><a href="#first-section" class="nav-link">First section</a></li>
           <li><a href="#second-section" class="nav-link">Second section</a></li>
           <li><a href="#third-section" class="nav-link">Third section</a></li>
           <li><a href="#fourth-section" class="nav-link">Fourth section</a></li>
           <li><a href="#fifth-section" class="nav-link">Fifth section</a></li>
         </ul>
        </header>
       </nav>
    <main id="main-doc">
      <section id="First_section" class="main-section">
        <header>
          <h2 id="first-section">First section</h2>
        </header>
        <!-- include at least 5 <li> elements  -->
        <p>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </p>
        <code></code>
        <p>
        </p>
        <code></code>    
      </section>
      <section id="Second_section" class="main-section">
       <header>
         <h2 id="second-section">Second section</h2>
        </header>
       <p></p>
       <code></code>
       <p></p>
       <code></code>
      </section>
      <section id="Third_section" class="main-section">
       <header>
         <h2 id="third-section">Third section</h2>
        </header>
       <p></p>
       <code></code>
       <p></p>
       <code></code>
      </section>
      <section id="Fourth_section" class="main-section">
       <header>
         <h2 id="fourth-section">Fourth section</h2>
        </header>
       <p></p>
       <code></code>
       <p></p>
       <code></code>
       </section>
      <section id="Fifth_section" class="main-section">
       <header>
         <h2 id="fifth-section">Fifth section</h2>
        </header>
       <p></p>
       <code></code>
       <p></p>
       <code></code>
      </section>
    </main>
  </body>
  • The preview shows this functionality. I click the item in the nav bar and it jumps to the correct section. I suppose I’ve written something in a way which makes it difficult for the test reader to assess this function.

  • I’ve tried moving the id="first-function elements out of the h2 and into header of each section but that doesn’t work. I also can’t add it to the section id because it already has an underscore id as per the tasks request.

Any suggestions or hints? Thanks!

you have ids that are exactly the same except for the uppercase or lowercase first letter. This is probably the problem. use unique ids and try again.

edit: correction. your main-section ids are using upper case first letters and they are not an exact match to the nav ids so that definitely would cause a problem for the test.

1 Like

Put the id on the section element and change the links and id to use an underscore.

Example for the first link

<li><a href="#first_section" class="nav-link">First section</a></li>


<section id="first_section" class="main-section">
  <header>
    <h2>First section</h2>
  </header>
</section>
1 Like

Tried this but it didn’t work. Really appreciate you taking the time to read it and make suggestion, though! :slight_smile:

That’s it. So I had some obsolete IDs there. Thanks a lot for taking the time to read it and make this suggestion. <3