Technical Documentation Page - Build a Technical Documentation Page(nav-link and main-section error message)

HTML-CSS
1

hey guys! I keep getting this error message: " You should have the same number of .nav-link and .main-section elements." and I don’t really understand, because I do have exactly 5 main-sections and 5 nav-link, the texts and the ids are also identicals. I could use some help here!

  **Your code so far**

/* file: index.html */
<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <meta name="viewport" content="width=width-device, initial-scale=1.0">
  <title></title>
</head>
<body>
   <nav id="navbar">
    <header>JS Documentation</header>
    <ul>
        <a class="nav-link" href="#Introduction"><li>Introduction</a></li>    
        <a class="nav-link" href="#What_You_Should_Already_Know"><li>What You Should Already Know</a></li>       
        <a class="nav-link" href="#JavaScript_and_Java"><li>JavaScript and Java</a></li>        
        <a class="nav-link" href="#Hello_World"><li>Hello World</a></li>        
        <a class="nav-link" href="#Variables"><li>Variables</a></li>
    </ul> 
  </nav>

  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <header id="Introduction">Introduction</header>
      <p>something important was written here</p>
      <p>something important was written here</p>
    </section>
    
    <section class="main-section" id="What_You_Should_Already_Know">
      <header id="What_You_Should_Already_Know">What You Should Already Know</header>
      <p>something important was written here</p>
      <p>something important was written here</p>
    </section>

    <section class="main-section" id="JavaScript_and_Java">
      <header id="JavaScript_and_Java">JavaScript and Java</header>
      <p>something important was written here</p>
      <p>something important was written here</p>
      <code></code>
      <code></code>
    </section>
   
    <section class="main-section" id="Hello_World">
      <header id="Hello_World">Hello World</header>
      <p>something important was written here</p>
      <p>something important was written here</p>
      <code></code>
      <code></code>
    </section>
    
    <section class="main-section" id="Variables">
      <header id="Variables">Variables</header>
      <p>something important was written here</p>
      <p>something important was written here</p>
      <code></code>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
  </main>
</body>
</html>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

This usually happens because of a missing tag somewhere or because you mispelled the ids.
Try checking both. I will take a look also.

Edit:

You have used the same id value in more than one element. Such as in this example:

        <section class="main-section" id="Introduction">
            <header id="Introduction">Introduction</header>

Please fix all of these so that the id is unique per element.

You also need to fix the ul element. Right now you have anchor elements as children of the ul but only li elements should be children of ul.
So make the li elements contain the anchor, not the other way round.

After making these fixes, your code passed for me. So I hope it does the same for you.

1 Like
3

thanks a lot! I will double check

Edit: thank you again for the help! The ul syntax made all the difference and the id hint was also a useful reminder to me!

1 Like
4

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