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">
	<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">

<nav id="navbar">
  <header>Business Page</header>
    <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>

<main id="main-doc">Technical Document
  <section class="main-section" id="Change">

  <section class="main-section" id="Product">

  <section class="main-section" id="Plan">

  <section class="main-section" id="Developments">

  <section class="main-section" id="Code">
/* 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