Technical Documentation Page - Build a Technical Documentation Page

Curriculum Help
,
1

My code doesn’t seem to pass because a have to link the .nav-link elements to corresponding .main-section elements

need some help

Your code so far

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

    <section class="main-section" id="What_you_should_already_know"><header>What you should already know</header>
    <code></code>
    <li></li>
    <p></p><p></p></section>
    
    <section class="main-section" id="JavaScript_and_Java"><header>JavaScript and Java</header>
    <code></code>
    <li></li>
    <p></p><p></p></section>
    
    <section class="main-section" id="Hello_world"><header>Hello world</header>
    <code></code>
    <li></li>
    <p></p><p></p></section>
   
    <section class="main-section" id="Variables"><header>Variables</header>
    <code></code>
    <li></li>
    <p></p><p></p></section>
    
    <nav id="navbar"><header>JS Documentation</header>

    <div><a class="nav-link" href="https://technical-documentation-page.freecodecamp.rocks/#Introduction">Introduction</a></div>

    <div><a class="nav-link" href="https://technical-documentation-page.freecodecamp.rocks/#What_you_should_already_know">What you should already know</a></div>
 
 <div><a class="nav-link" href="https://technical-documentation-page.freecodecamp.rocks/#JavaScript_and_Java">JavaScript and Java</a></div>
 
 <div><a class="nav-link" href="https://technical-documentation-page.freecodecamp.rocks/#Hello_world">Hello world</a></div>
 
 <div><a class="nav-link" href="https://technical-documentation-page.freecodecamp.rocks/#Variables">Variables</a><div> </nav>
  </main>
</body>

/* file: styles.css */
@media (max-width: 600px) {
  body {
    background-color: white;
  }
}
#navbar {padding-right: 10%  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Its asking you to link navigation elements to sections on the page.
You can do this by passing in the id of the section into an anchor element.

For example I may have something like this:
(this is an example not the answer)

<nav>
    <a href="#section-ID">Click here to go to section</a>
</nav>

<section id="section-ID">
      <p>some content</p>
</section>

Remember ids are case sensitive and should not contain spaces

HTML Links - Create Bookmark (w3schools.com)

3

Thank very very much it worked