Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
So, all I need to do for this is the “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).” bit and the “Your Technical Documentation project should use at least one media query.” Am I missing anything?

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <main id="main-doc">
    <section class="main-section" id="o">
      <header>o</header>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </section>
    <section class="main-section" id="o">
      <header>o</header>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </section>
    <section class="main-section" id="o">
      <header>o</header>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </section>
    <section class="main-section" id="o">
      <header>o</header>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </section>
    <section class="main-section" id="o">
      <header>o</header>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </section>
    <nav id="navbar">
      <header></header>
      <a class="nav-link" href="main-section">o</a>
      <a class="nav-link" href="main-section">o</a>
      <a class="nav-link" href="main-section">o</a>
      <a class="nav-link" href="main-section">o</a>
      <a class="nav-link" href="main-section">o</a>
    </nav>
  </main>

</body>
</html>
/* file: styles.css */

  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

You can’t just use the same values.

The id attribute is supposed to be unique and you should not use o for everything.

Ah, ok.
Thanks for letting me know.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="o">
        <header>o</header>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </section>
      <section class="main-section" id="i">
        <header>i</header>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </section>
      <section class="main-section" id="e">
        <header>e</header>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </section>
      <section class="main-section" id="a">
        <header>a</header>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </section>
      <section class="main-section" id="u">
        <header>u</header>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </section>
      <nav id="navbar">
        <header></header>
        <a class="nav-link" href="a">a</a>
        <a class="nav-link" href="e">e</a>
        <a class="nav-link" href="i">i</a>
        <a class="nav-link" href="o">o</a>
        <a class="nav-link" href="u">u</a>
      </nav>
    </main>

  </body>
</html>

Like this, right?

Did you not test it? I would suggest you test it.

I tested it, the " 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)." thing still shows an “X” on it. What should I do?

Are you sure you are using the correct syntax for the href attribute?

Ok, thanks for that, now I’ll just need to do the “Your Technical Documentation project should use at least one media query.” bit to finish this project.

It is up to you, but I would strongly suggest doing more than just the bare minimum of passing the tests. You won’t learn much of anything just doing that.

Create an actual functional page and put a little effort into it. You learn a lot more from that than just passing the requirements. But like I said, up to you.

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