Build a Technical Documentation Page

HTML-CSS
1

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!
2

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.

3

Thanks Ella!

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

4

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.

5

Test

6

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:

7

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