Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

May I have some assistance understanding why this step isn’t working: 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 -->
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Technical Documentation Page</title>
	<link rel="stylesheet" href="styles.css">

<body>
<nav id="navbar">
  <header>Business Page</header>
  <ul>
    <li><a class="nav-link" href="Change">Change</a></li>
    <li><a class="nav-link" href="Product">Product</a></li>
    <li><a class="nav-link" href="Plan">Plan</a></li>
    <li><a class="nav-link" href="Developments">Developments</a></li>
    <li><a class="nav-link" href="Code">Code</a></li>
  </ul>
</nav>

<main id="main-doc">Technical Document
  <section class="main-section" id="Change">
    <header>Change</header>
    <p>Software</p>
    <p>Engineering</p>
    <code>
    </code>
    <li></li>
    
  </section>

  <section class="main-section" id="Product">
    <header>Product</header>
    <p>Convenience</p>
    <p>Impact</p>
    <code></code>
    <li></li>
  </section>

  <section class="main-section" id="Plan">
    <header>Plan</header>
    <p>Expand</p>
    <p>Explore</p>
    <code></code>
    <li></li>
  </section>

  <section class="main-section" id="Developments">
    <header>Developments</header>
    <p>Page</p>
    <p>Robotics</p>
    <code></code>
    <li></li>
  </section>

  <section class="main-section" id="Code">
    <header>Code</header>
    <p>Python</p>
    <p>Javascript</p>
    <code></code>
    <li></li>
  </section>
 
</main>
</body>
</head>
</html>
/* file: styles.css */

@media screen and (max-width: 100px) {
  #navbar {
    width: 5.5vw;
  }
  #navbar-title {
    font: 16px;
  }
  .nav-link {
    font: 14px;
  }
}

Your browser information:

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Welcome to the forum @Sash

Each href value needs to be prefixed with a #, to link it to the corresponding id property in the section element.

Happy coding

Thank you, it worked!

1 Like