Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.
“Your #navbar should have exactly one header element within it.”
this is the only error i am getting out of all the tasks.
I don’t know what’s wrong in my code.
Please help me.
Your code so far

<!-- file: index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
  </head>
<main id="main-doc">
  <section class="main-section" id="First_section">
    <header>
      First section
    </header>
      <p>This is the first section which has h1 element</p>
      <p>It also contains paragraph element</p>
    <code>
      This is sample code 1.
    </code>
    <ul>
      <li>HTML and CSS</li>
    </ul>
    <nav id="navbar">
      <header>This is the first section</header>
      <a href="#First_section" class="nav-link">First section</a>
      </nav>
  </section>
  <section class="main-section" id="Second_section">
    <header>
      Second section
    </header>
      <p>This is the second section which has h2 element</p>
      <p>It also contains paragraph element</p>
     <code>
      This is sample code 2.
      </code>
      <ul>
        <li>Javascript</li>
      </ul>
      <nav id="navbar">
        <header>This is the second section</header>
        <a href="#Second_section" class="nav-link">Second section</a>
      </nav>
      </section>
  <section class="main-section" id="Third_section">
    <header>
      Third section
    </header>
      <p>This is the third section which has h3 element</p>
      <p>It also contains paragraph element</p>
     <code>
      This is sample code 3.
      </code>
      <ul>
        <li>Python</li>
      </ul>
      <nav id="navbar">
        <header>This is the third section</header>
        <a href="#Third_section" class="nav-link">Third section</a>
      </nav>
      </section>
  <section class="main-section" id="Fourth_section">
    <header>
      Fourth section
    </header>
      <p>This is the fourth section which has h4 element</p>
      <p>It also contains paragraph element</p>
    </header>
     <code>
      This is sample code 4.
      </code>
      <ul>
        <li>React</li>
      </ul>   
      <nav id="navbar">
      <header>This is the fourth section</header>
        <a href="#Fourth_section" class="nav-link">Fourth section</a>
      </nav>
    </section>
  <section class="main-section" id="Fifth_section">
    <header>
      Fifth section
    </header>
      <p>This is the fifth section which has h5 element</p>
      <p>It also contains paragraph element</p>
    </header>
     <code>
      This is sample code 5.
      </code>
      <ul>
        <li>Bootstrap</li>
      </ul>
        <nav id="navbar">
        <header>This is the first section</header>
       <a href="#Fifth_section"class="nav-link">Fifth section</a>
        </nav>
      </section>
  </main>
/* file: styles.css */
@media only screen and (max-width: 600px) {
   #nav {
        background-color: lightblue;
    }

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

that’s not the error you’re getting.

you’re getting error that you didnt put navbar on left side of the screen.

On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.

this is your code applied:

Welcome!
I do see, by checking it out, that you are receiving that message of

After reviewing your code to see how to be guide you, here are some suggestions:

  1. Navbar should be near at the top of the body just before the main-doc.

  2. All Nav-links should be here to be able to access the sections from this one location. (should not be located at the exact location of the section as this is not what the links are meant to do). REMEMBER to give each one the same id and name as the matching section below. The links are to navigate to the section from the top of the page.

  3. One header with the Introduction should be here somewhere.

  4. Close this header with the correct closure for the header.

  5. Close the navbar.

Rest of the body and headers will not be in the navbar, but it will have the required header. Plus the Navlinks should work to forward you to the section on the page where you currently have them.

Just a heads up, some other changes may be necessary by you after the changes. But, if so, I suggest trying to fix them. If they are problems, that is where we all try to step up and support you with guidance.

Hope this helps you!

Happy coding! :slight_smile:

I didn’t get you. What should I do with my code in order to get the answer?


See this.
Help me as I am stuck.

The following article provides information and examples of what the navbar should appear like.

I hope it helps you.

Happy coding! :slight_smile:

saw this but still the same error :frowning:

and how does your current code look?

1 Like

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