Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
I can’t see what is incorrect, i am stuck on the problem of - " 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)."
It is a link but for some reason its apparently wrong.
Can someone help please?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Documentation Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
   <p>
     <code></code>
<li>

</li>
   </P>
<nav id="navbar" > <header>Introduction</header> <a class="nav-link" href="Introduction">Introduction</a>
</nav>
     <p>
       </p>
</section>

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

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

<section class="main-section" id="Hello_world">
<header>Hello world</header>
   <p>
   <code>  </code>
<li>
  
</li>
   </P>
<nav id="navbar" >  <a class="nav-link" href="Hello_world">Hello world</a> </nav>
     <p>
       </p>
   </section>
  

<section class="main-section" id="Variables">
<header>Variables</header>
   <p>
   <code>  </code>
<li>
  
</li>
   </P>
<nav id="navbar" >  <a class="nav-link" href="Variables">Variables</a>
 </nav>
     <p>
       </p>
</section>

  </main>

    </body>

/* file: styles.css */


@media (max-width: 1199px) and (min-width: 769px) {

}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

You have made too many mistakes: ids repeated, more ‘navbar’ elements, no closing tag of the HTML element, ‘li’ elements without ‘ul’ element …

All ‘href’ attributes’ values miss # in front of them.

3

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