Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I don’t understand what I’m doing wrong in this one:
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 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./styles.css"></link>
    </head>
    <body>
      <main id="main-doc">
        <section class="main-section" id="first_section">
          <header>First section</header>
          <p></p>
          <p></p>
          <code></code>
          <ul>
            <li></li>
            <li></li>
            </ul>
            <a></a>
        </section>
        <section class="main-section" id="second_section">
          <header>Second section</header>
          <p></p>
          <p></p>
          <code></code>
          <ul>
            <li></li>
            <li></li>
            </ul>
            <a></a>
        </section>
        <section class="main-section" id="third_section">
          <header>Third section</header>
          <p></p>
          <p></p>
          <code></code>
          <ul>
            <li></li>
            <li></li>
            </ul>
            <a></a>
        </section>
        <section class="main-section" id="fourth_section">
          <header>Fourth section</header>
          <p></p>
          <p></p>
          <code></code>
          <ul>
            <li></li>
            <li></li>
            </ul>
            <a></a>
        </section>
        <section class="main-section" id="fifth_section">
          <header>Fifth section</header>
          <p></p>
          <p></p>
          <code></code>
          <ul>
         <li></li>
         <li></li>
         </ul>
         <a></a>
        </section>
        </main>
        <nav id="navbar">
          <header>In this documentation you will see the following</header>
          <a class="nav-link" href="first_section">First section</a>
          <a class="nav-link" href="second_section">Second section</a>
          <a class="nav-link" href="third_section">Third section</a>
          <a class="nav-link" href="fourth_section">Fourth section</a>
          <a class="nav-link" href="fifth_section">Fifth section</a>
        </nav>
      </body>
  </html>

/* file: styles.css */
@media () {}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Add a hash mark to all of your nav link addresses.
Ex:

<a class="nav-link" href="#first_section">
2 Likes
3

why is your navigation near the end of body. when it should be first thing after body starts.

1 Like
4

because it said that should be before anything else

5

thank you for this, I was stuck for like a day, but now I got it and it’s finally finished <3

6

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