Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
All the tests work except for " 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)."

I thought mine would work because when I click on the link in the preview it says “Normally this link would bring you to another website! It works. This is a link to: https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/Barbie

So I am confused on how to fix this problem

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8"></meta>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
   <title>Technical Documentation</title>
   <link rel="stylesheet" href="styles.css"></link>


   <nav id="navbar">
<header>FAV THINGS</header>
<a class="nav-link" href="Barbie">Barbie</a>
<a class="nav-link" href="Cats">Cats</a>
<a class="nav-link" href="Puppies">Puppies</a>
<a class="nav-link" href="Bunnies">Bunnies</a> 
<a class="nav-link" href="Cupcakes">Cupcakes</a>
</nav>


</head>
<body>
 <main id="main-doc">
<section class="main-section" id="Barbie">
<header>Barbie</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>
<section class="main-section" id="Cats">
<header>Cats</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>
<section class="main-section" id="Puppies">
<header>Puppies</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>
<section class="main-section" id="Bunnies">
<header>Bunnies</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>
<section class="main-section" id="Cupcakes">
<header>Cupcakes</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>
</main>
</body>








   
/* file: styles.css */

@media (max-width: 10) {
 #navbar{
   float: left;
 }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Hi there! When you are using a href to link to the corresponding section, don’t forget the “#” in front of the section you are linking to since that’s how it knows which id to link to. (I forget to do that all the time and have to constantly remind myself). :slight_smile:

1 Like

It worked thank you!!!

2 Likes

Awesome, glad to hear it!

1 Like

then also consider choosing this to be a “solution” as well, happy coding :slight_smile:

1 Like

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