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`