Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

hello everybody!!!
here is my question how i can do for this 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

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>technical documentation</title>
    <link rel="stylesheet" href="styles.css">
    <link name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <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>
    </section>
     <section class="main-section" id="What_you_should_already_know">
       <header>What you should already know</header>
         <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>
  </section>
   <section class="main-section" id="Javascript_and_java">
     <header>Javascript and java</header>
       <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>
   </section>
    <section class="main-section" id="Hello_worlds">
      <header>Hello worlds</header>
        <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>
      </section>
    <section class="main-section" id="Variables">
      <header>Variables</header>
        <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> 
           </section>
<nav id="navbar">
  <header>declaring variables</header>
  <a class="nav-link" href="#">Introduction
</a>
<a class="nav-link" href="#">What you should already know</a>
<a class="nav-link" href="#">Javascript and java</a>
  <a class="nav-link" href="#">Hello worlds</a>
  <a class="nav-link" href="#">Variables</a>
<section  
  </nav>
</main>
  </body>
  </html>

/* file: styles.css */
@media query{
  
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hi @Samuel-54,

So let’s say I have something like:

<section id="section-title">Section Title</section>

To “link” it within the same page, I would use something like:

<a href="#section-title">Section Title</a>

I hope this helps. Happy coding!

Basically, you’re passing whatever your id is set to, to your href attribute with the # sign in front.

3

Wow!@ablairmorris.this was very confusing me, but now as you say when i correct it i passed the challenge. thanks for your help!!!

1 Like