Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
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 am not getting how to do this step

Your code so far

<!-- file: index.html -->
<main id="main-doc">
  
<section class="main-section" id="Technical_Documentation">
<header>Technical Documentation</header>
</section>
<section class="main-section" id="Technical_Documentation">
<header>Technical Documentation</header>
</section>
<section class="main-section" id="Technical_Documentation">
<header>Technical Documentation</header>
</section>
<section class="main-section" id="Technical_Documentation">
<header>Technical Documentation</header>
<section class="main-section" id="Technical_Documentation">
<header>Technical Documentation</header>
</section>
<p></p>
<p></p>
<p></P>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<code></code>
<code></code>
<code></code>
<code></code>
<code></code>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<nav id="navbar">
<header>Technical Documentation</header>
<a class="nav-link">Technical Documentation</a>
<a class="nav-link">Technical Documentation</a>
<a class="nav-link">Technical Documentation</a>
<a class="nav-link">Technical Documentation</a>
<a class="nav-link">Technical Documentation</a>
</nav>
<style>
@media {}
</style>

</main>





/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

A link can point to an element on the page by using the id of that element in its href attribute. That’s what the instructions want you to do here.

3

I tried adding href attribute in it like for ex - <a class="nav-link" href="#Technical_ Documentation">Technical Documentation</a>
but still not working

4

You need to show us your updated HTML so we can see what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
5

now please help , had already posted the updated code

6

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