Build a Technical Documentation Page

Help I can’t finish this 2 final parts

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

  2. Your Technical Documentation project should use at least one media query.

Here is my code so far:

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<main id="main-doc">
  <section class="main-section" id="Su_s">
    <header>Su s</header>
    <nav id="navbar">
      <header>Su s</header>
      <a href="Su_s" class="nav-link">Su s</a>
    </nav>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="Sus_2">
    <header>Sus 2</header>
    <nav id="navbar">
    <a href="Sus_2" class="nav-link">Sus 2</a>
    </nav>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="Sus_3">
    <header>Sus 3</header>
    <nav id="navbar">
    <a href="Sus_3" class="nav-link">Sus 3</a>
    </nav>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="Sus_4">
    <header>Sus 4</header>
    <nav id="navbar">
    <a href="Sus_4" class="nav-link">Sus 4</a>
    </nav>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section class="main-section" id="Sus_5">
    <header>Sus 5</header>
    <nav id="navbar">
    <a href="Sus_5" class="nav-link">Sus 5</a>
    </nav>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
</main>
  </body>

</html>

and CSS:

@media  {
  
}

Thanks!

Hi!
You should only have one nav with an id of navbar. A given id value can only be used once in a html document. Take a look at this w3schools page on id.

Your nav element should contain your .nav-link

Here is the w3schools page on media queries. It should help you create one.

Finally, in future please link to the lesson/project you are doing in your post. It makes it easier to help.

Thanks Ella!

I’ll try to link my project…just trying how this “forum” thing works though.

Try copying the link from your search bar when you’re on the lesson page and pasting it into a reply.

Also, if you want to reply directly to someone so they see it in notifications, press the left pointing arrow with the word ‘reply’ next to it.

Test

That link works!

If you use the ‘ask for help’ button it should automatically put a lesson link at the bottom of your post by the way. :slight_smile:

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