Technical Documentation Page Project

I have checked and double checked my code and every thing seems correct.
here are the errors I am getting.

Each .main-section should have an id that matches the text of its first child,
having any spaces in the child’s text replaced with underscores (_) for the id’s.

Each .nav-link should have text that corresponds to the header text of its related
section (e.g. if you have a “Hello world” section/header, your
#navbar should have a .nav-link which has the text “Hello world”).

<li>
       <a class="nav-link" href="#Introduction">Introduction</a>
     </li>
<section class="main-section" id="Introduction">
   <header>Introduction</header>

<li>
       <a class="nav-link" href="#What_you_should_already_know">
What you should already know</a>
  </li>
<section class="main-section"id="What_you_should_already_know">
<header>What you should already know</header>

<li>
       <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
   </li>
<section class="main-section"id="JavaScript_and_Java">
   <header>JavaScript and Java></header>

<li>
       <a class="nav-link" href="#Hello_world">Hello world</a>
    </li>
<section class="main-section" id="Hello_world">
 <header>Hello world</header>

<li>
       <a class="nav-link" href="#Variables">Variables</a>
    </li>
<section class="main-section" id="Variables">
 <header>Variables</header>

<li>
      <a class="nav-link"
 href="#Declaring_variables">Declaring variables</a>
     </li>
<section class="main-section" id="Declaring_variables">
 <header>Declaring variables</header>

<li>
       <a class="nav-link"
  href="#Variable_scope">Variable scope</a>   
     </li>
<section class="main-section" id="Variable_scope">
 <header>Variable scope</header>

 <li>
       <a class="nav-link"href="#Global_variables">Global variables</a>   
     </li>
<section class="main-section" id="Global_variables">
 <header>Global variables</header>

<li>
       <a class="nav-link"      href="#Constants">Constants</a>   
     </li>
<section class="main-section"id="Constants">
 <header>Constants</header>

<li>
       <a class="nav-link"
 href="#Data_types">Data types</a>   
     </li>
<section class="main-section" id="Data_types">
  <header>Data types</header>

<li>
       <a class="nav-link" href="#if...else_statement">if...else statement</a>   
     </li> 
<section class="main-section" id="if...else_statement"><header>if...else statement</header>

<li>
       <a class="nav-link" href="#while_statement">while statement</a>   
     </li>   
<section class="main-section" id="while_statement">
 <header>while statement</header>

<li>
       <a class="nav-link"
  href="#Function_declarations">Function declarations</a>   
     </li>  
<section class="main-section" id="Function_declarations">
 <header>Function declarations</header>

<li>
       <a class="nav-link"
   href="#Reference">Reference</a>   
     </li>    
<section class="main-section" id="Reference">
 <header>Reference</header>

Check that your attributes are separated with a space.

image

The sections should not be next to the nav-link

When you click the nav-link, the page should jump to the section.
Here is a basic example of how nav-links/bookmarks can be structured:

<nav>
  <ul>
    <a href="#Name-One">
      <li >go to Name One</li>
    </a>
    <a href="#Name-Two">
      <li >go to Name Two</li>
    </a>
    <a href="#Name-Three">
      <li >go to Name Three</li>
    </a>
  </ul>
</nav>

<section id="Name-One">
  <p>First section content</p>
</section>
<section id="Name-Two">
  <p>Second section content</p>
</section>
<section id="Name-Three">
  <p>Third section content</p>
</section>

The sections have an ID, which is used as the anchor href values.
When clicked instead of sending the user to a new webpage, it will jump to the section element with the same ID.

This means when someone wants to go to the last section, they dont have to scroll through content to get there.

You can test your nav-links/bookmarks in the preview by clicking on them.

1 Like

Thanks I finally solved the problems it was a misplaced >!

1 Like