Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Im stuck on this. Says I need to link Nav-link to the corresponding IDs. I have done that but nothing works??

Your code so far
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).

<!-- file: index.html -->
<link rel="stylesheet" href="styles.css">
<nav id="navbar"><header></header>
<a class="nav-link" href="music">music</a>
<a class="nav-link" href="patrick">patrick</a>
<a class="nav-link" href="listen">listen</a>
<a class="nav-link" href="people">people</a>
<a class="nav-link" href="strong">strong</a>
</nav>

<main id="main-doc">
<section class="main-section" id="music"><header>music</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>
<section class="main-section" id="patrick"><header>patrick</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>
<section class="main-section" id="listen"><header>listen</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>
<section class="main-section" id="people"><header>people</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>
<section class="main-section" id="strong"><header>strong</header>
<p></p>
<p></p>
<code></code>
<li></li>
</section>


</main>


/* file: styles.css */

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

If you click on the links in your nav menu do they scroll the page to the appropriate section? They don’t for me. This should tell you that you don’t have them quite set up correctly. You are missing something at the beginning of each href value that turns them into internal links on the page.

1 Like

Thanks… I was missing one title for the header.
And to link the nav-link. I didn’t add the # for the href… to link it with ID… I solved it now.
Thank you anyway.

another issue came up. See the text below about the technical document.

How do I solve it?

**Your Technical Documentation project should use at least one media query. **

Add a media query in the CSS :slight_smile:

Thank you. I happen to add a media query first in HTML… That was the issue… Project completed… thank you @bbsmooth