Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Hello everyone. I really need help with my technical documentation project. I don’t seem to pass instruction 13 " When you click on a navbar element, the page should navigate to the corresponding section of the #main-doc element (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, and contains the corresponding header)" I have been on this for weeks and cannot move forward
Your code so far

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav id="navbar"><header>JS Documentation</header>
  <a class="nav-link" href="#Introduction" rel="internal">Introduction</a>
<a class="nav-link" href="#What_you_should_already_know" rel="internal">What you should already know</a>
<a class="nav-link" href="#Javascript_Java" rel="internal">Javascript and Java</a>
<a class="nav-link" href="#Hello_World" rel="internal">Hello World</a>
<a class="nav-link" href="#Variables" rel="internal">Variables</a>
<a class="nav-link" href="#Declaring_variables" rel="internal">Declaring variables</a>
<a class="nav-link" href="#Variables_scope" rel="internal">Variables scope</a>
<a class="nav-link" href="#Global_variables" rel="internal">Global variables</a>
<a class="nav-link" href="#Constants" rel="internal">Constants</a>
<a class="nav-link" href="#Data_types" rel="internal">Data types</a>
<a class="nav-link" href="#if_else_statement" rel="internal">if else statement</a>
<a class="nav-link" href="#While_statements" rel="internal">While statements</a>
<a class="nav-link" href="#Functional_declarations" rel="internal">Functional declarations</a>
<a class="nav-link" href="#References" rel="internal">References</a>
     </nav>
    <main id="main-doc">
      <section class="main-section" id="Introduction"><header id="Introduction">Introduction</header>
      <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small a</p>
      <p>JavaScript contains a standard library of objects, s</p>
      <ul>
      <li>Client-side JavaScript extends the core language by supplying objects to  </li>
      <li>Server-side JavaScript extends the core language by </li>
      </ul>
      </section>
      <section class="main-section" id="What_you_should_already_know"><header id="What_you_should_already_know">What you should already know</header>
     
      <p>This guide assumes you have the following basic background:
</p>
<ul>
      <li>A general understanding of</li>
      <li>Good working knowledge of </li>
      <li>Some programming experience. If</li>
      </ul>
      </section>
      <section class="main-section" id="Javascript_and_Java"><header id="Javascript_and_Java">Javascript and Java</header>      
      <p></p>
      <code></code>
      <li></li>
      </section>
      <section class="main-section" id="Hello_World"><header id="Hello_World">Hello World</header>
      <p></p>
      <code></code>
      <li></li> 
      </section>
      <section class="main-section" id="Variables"><header id="Variables">Variables</header>
      <p></p> 
      <code></code>
      <li></li>
      </section>
      <section class="main-section" id="Declaring_variables"><header id="Declaring_variables">Declaring variables</header>  
      <p></p> 
      <code></code>
      <li></li>
      </section>
      <section class="main-section" id="Variables_scope"><header id="Variables_scope">Variables scope</header>   
      <p></p>
      <code></code>
      <li></li>
      </section>
      <section class="main-section" id="Global_variables"><header id="Global_variables">Global variables</header>    
      <p></p>
      <code></code>
      <li></li>
      </section>
      <section class="main-section" id="Constants"><header id="Constants">Constants</header>   
      <p></p>
      <code></code>
      <li></li> 
      </section>
      <section class="main-section" id="Data_types"><header id="Data_types">Data types</header>    
      <p></p>
      <code></code>
      <li></li>
       </section>
      <section class="main-section" id="if_else_statement"><header id="if_else_statement">if else statement</header>    
      <p></p>
      <code></code>
      <li></li>
       </section>
      <section class="main-section" id="While_statements"><header id="While_statements">While statements</header> 
      <p></p>
      <code></code>
      <li></li> 
      </section>
      <section class="main-section" id="Functional_declarations"><header id="Functional_declarations">Functional declarations</header>
      <p></p>
      <code></code>
      <li></li>
      </section>
      <section class="main-section" id="References"><header id="References">References</header>
      <p></p>
      <code></code>
      <li></li>
      </section>
     
    </main>
  </body>
</html>

@media(max-width:768px){#navbar{width:100px;text-align: left}}

@media(max-width:768px){.nav-link{width:100px;text-align: right;padding:1%}}

@media(max-width:768px){#main-doc{width:100px;padding:10%; position: absolute; top:right; height: 100px}}

.nav-link{ text-orientation : right;}

body{display:block; justify-content:space-evenly;align-items:center;}

a:hover{background-color:#92869c;cursor: pointer;text-decoration: none; }

#nav-bar{position: fixed;}r paste code here

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy-to-read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page`Preformatted text`

You have a problem with duplicate ids among other issues.

Paste your code in this online validator and fix all the errors being reported

Thanks a lot
I have seen many errors that needs correcting

1 Like

After correcting all the errors. My problem was not solved.I think it has to do with the styling. I still need help for the page to navigates to the section element.

Can you post the newest code here?

Did you find and fix the duplicate ids?

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