Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

This is the one rule that I have not yet satisfied for this test:

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">
  <main id= "main-doc">
    <section id="media_mobility" class="main-section">
      <header>Media Mobility</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
    <section id="action_vlogger" class="main-section">
      <header>Action Vlogger</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
    </section>
    <section id="producer" class="main-section">
      <header>Producer</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
    <section id="crew_support" class="main-section">
      <header>Crew Support</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
    <section id="cargo_hauler" class="main-section">
      <header>Cargo Hauler</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
    <nav id="navbar">Action Vlogger
      <header>NAVIGATE SITE</header>
      <a href="main-doc" class="nav-link">Media Mobility</a>
      <a href="main-doc" class="nav-link">Action Vlogger</a>
      <a href="main-doc" class="nav-link">Producer</a>
      <a href="main-doc" class="nav-link">Crew Support</a>
      <a href="main-doc" class="nav-link">Cargo Hauler</a>
    </nav>
  </main>
  <link rel="stylesheet" href="styles.css">
</html>

/* file: styles.css */
#navbar {
  position: fixed;
  left: 0;
  margin-left: 0;
  padding-left: 0;
}
@media { max-width: 1100px;
  .main-section {
    min-width: 500px;
    max-width: 1100px;
  }
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hi

Your href should correspond to each section id (and therefore should not all be “main-doc”)

so for example, if you have :
<section id="Hello_world">
<header>Hello world</header>
</section>

then in your navbar, your a link should look like this:
<a href="#Hello_world" class="nav-link"></a>

1 Like
3

There are a few corrections and improvements that can be made to your HTML code:

  1. Wrap your <header> tag inside the <nav> element to structure your navigation properly.
  2. Use the href attribute in the <a> tags to link to the respective sections using their id attributes.
  3. Ensure that the <nav> element is placed inside the <header> element to semantically represent the navigation bar.
  4. Fix the typo in the href attributes of the <a> tags to point to the correct sections.

Here’s the corrected HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav id="navbar">
      <header>NAVIGATE SITE</header>
      <a href="#media_mobility" class="nav-link">Media Mobility</a>
      <a href="#action_vlogger" class="nav-link">Action Vlogger</a>
      <a href="#producer" class="nav-link">Producer</a>
      <a href="#crew_support" class="nav-link">Crew Support</a>
      <a href="#cargo_hauler" class="nav-link">Cargo Hauler</a>
    </nav>
  </header>
  <main id="main-doc">
    <section id="media_mobility" class="main-section">
      <header>Media Mobility</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
    <section id="action_vlogger" class="main-section">
      <header>Action Vlogger</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
    <section id="producer" class="main-section">
      <header>Producer</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
    <section id="crew_support" class="main-section">
      <header>Crew Support</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
    <section id="cargo_hauler" class="main-section">
      <header>Cargo Hauler</header>
      <p></p>
      <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <code></code>
    </section>
  </main>
</body>
</html>

Make sure to replace the empty <p>, <ul>, and <li> elements with your actual content. Additionally, you may need to adjust the styles in your styles.css file to achieve the desired layout and appearance.

1 Like
4

Thank you for your prompt response !

1 Like
5

Thank you for your response !

1 Like
6

Your welcome. Happy Coding!

7

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