Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Hi everyone, I am little stuck on these two steps and I can’t figure out how to complete the task.

  1. Your #navbar should have exactly one header element within it.
    2.(if I move the header after the nav, I get the error cause “The first child of each .main-section should be a header element.”)*

2. The header element in the #navbar should come before any link (a ) elements also in the #navbar .
(No idea how to get around this)

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <title></title>
  <body>

<main id="main-doc">
  <h2>JS Documentation</h2>

  <section class="main-section" id="Introduction">
    <header>
    <nav id="navbar">
      <h4><a class="nav-link" href="#Introduction">Introduction</a>
      </h4>
      </nav>
    </header>
    <p></p>
    <p></p>
    <code></code>
      <ul>
      <li>bla bla bla</li>
      </ul>
</section>

  <section class="main-section" id="What_you_should_already_know">
   <header>
     <nav id="navbar">
       <h4>
       <a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
       </h4>
   </nav>
    </header>
    <p></p>
    <p></p>
    <code></code>
    <ul>
      <li>ble ble ble</li>
      </ul>
  </section>

  <section class="main-section" id="Javascript_and_Java">
          <header>
            <nav id="navbar">
       <h4> 
         <a class="nav-link" href="#Javascript_and_Java">JavaScript and Java</a>
         </h4>
    </nav>
            </header>
    
    <p></p>
    <p></p>
    <code></code>
    <ul>
      <li> blo blo blo</li>
      </ul>
  </section>

  <section class="main-section" id="Hello_World">
         <header>
           <nav id="navbar">
            <h4>
        <a class="nav-link" href="#Hello_World">Hello World</a>
        </h4>
    </nav>
    </header>
    <p></p>
    <p></p>
    <code></code>
    <ul>
      <li>bli bli bli</li>
      </ul>
  </section>

  <section class="main-section" id="Variables">
        <header>
          <h4>
    <nav id="navbar">
        <a class="nav-link" href="#Variables">Variables</a>
        </h4>
    </nav>
        </header>
    <p></p>
    <p></p>
    <code></code>
    <ul>
      <li>blu blu blu</li>
      </ul>

    </section>

  </main>

</body>
</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

1 Like
2

So, I am looking through your code, and it looks like you went a little nav happy. Here is a note about the nav element in the documentation

“Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links.”

So a nav would be more used for like the top navigation of a webpage that has several tabs. You dont need the links on your page wrapped in a nav. If you remove the navs around the links it should really help clean up on seeing which navbar this error is referring to. It could also be whats causing the problem with your number two. There is just way too many nav elements right now so its hard to what exactly this nav error is referring to

Or, you can just have one big nav that wraps all of the links instead of having a nav for each link

3

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