Technical Documentation Challenge

HTML-CSS
1

Hello, I have almost completed the Challenge; I’m having trouble with the last question.

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).

  **Your code so far**

/* file: index.html */
<link rel="stylesheet" href="styles.css">

<main id='main-doc'>
<section class='main-section' id="JavaScript_and_Java">
  <header>JavaScript_and_Java</header>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <nav id='navbar'>
    <header>Hello_world</header>
    <a class='nav-link' href='JavaScript_and_Java'>JavaScript_and_Java</a>
</section>

<section class='main-section' id="JavaScript_and_Java">
  <header>JavaScript_and_Java</header>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <nav id='navbar'>
    <!-- <header>Hello_world</header> -->
    <a class='nav-link'  href='JavaScript_and_Java'>JavaScript_and_Java</a>
  </nav>
</section>

<section class='main-section' id="JavaScript_and_Java">
  <header>JavaScript_and_Java</header>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <nav id='navbar'>
    <!-- <header>Hello_world</header> -->
    <a class='nav-link' href='JavaScript_and_Java'>JavaScript_and_Java</a>
</section>
<section class='main-section' id="JavaScript_and_Java">
  <header>JavaScript_and_Java</header>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <nav id='navbar'>
    <!-- <header>Hello_world</header> -->
    <a class='nav-link' href='JavaScript_and_Java'>JavaScript_and_Java</a>
</section>

<section class='main-section' id="JavaScript_and_Java">
  <header>JavaScript_and_Java</header>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <code></code>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <nav id='navbar'>
    <!-- <header>Hello_world</header> -->
    <a class='nav-link' href='JavaScript_and_Java'>JavaScript_and_Java</a>
</section>

</div>

/* file: styles.css */
@media (max-width: 600px) {
  body {
  background-color: lightblue;
}
}

  **Your browser information:**

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

Challenge: Build a Technical Documentation Page

Link to the Challenge:

2

You should only have one <nav> in your document.

1 Like
3

I’m confused a little by the question. I am linking it to the session and getting an error. Can I get a hint on what I’m doing wrong?

4

The main thing you are doing wrong is that you have multiple <nav>s all with the id of navbar. HTML does not allow multiple elements to have the same id so you have an error there. Furthermore, as I mentioned, you should only have one <nav> element in your document. It should be near the beginning of the document. It will contain all the internal links to the sections in your document. It’s acting like a table of contents.

5

You need to refer to the id “JavaScript_and_Java” inside the href in the same way you do an id selector in css.
Also why do you have multiple navbars?

1 Like
6

Thanks just Realize now I feel Dumb now.

7

Don’t feel dumb, this is just part of the learning process. You aren’t the first to make this mistake and you won’t be the last.

1 Like
8

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