Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

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

<body>
  <div class="wrap">
    <nav id="navbar">
       <header>JS Documentation</header>
       <ul>
      <li><a class="nav-link>" href="Hello world">Hello world</a></li>
      <li><a class="nav-link>" href="Declaring variables">Declaring variables</a></li>
      <li><a class="nav-link>" href="Variable scope">Variable scope</a></li>
      <li><a class="nav-link>" href="#Global variables">Global variables</a></li>
      <li><a class="nav-link>" href="#Data types">Data types</a>
      </ul>
     </nav>
  <div/>

<main id="main-doc">

<section class="main-section" id="Hello_world">
<header>Hello world</Header>
<p>
  <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<p>
    <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<code></code>
</section>
<section class="main-section" id="Declaring_variables">
  <header>Declaring variables</Header>
  <p>
  <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<p>
    <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<code></code>
</section>
<section class="main-section" id="Variable_scope">
  <header>Variable scope</Header>
  <p>
  <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<p>
    <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<code></code>
</section>
<section class="main-section" id="Global_variables">
  <header>Global variables</Header>
  <p>
  <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<p>
    <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<code></code>
</section>
<section class="main-section" id="Data_types">
  <header>Data types</Header>
  <p>
  <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<p>
    <ul>
    <li></li>
     <li></li>
  </ul>
</p>
<code></code>
</section>
  
   
  </main>
  </body>
  </html>
/* file: styles.css */
nav{
  display: left;
  width: 30%;
  padding-bottom: 40px;
}
header{
  padding-bottom: 20px;
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Nice of you to join our great community!

Please tell us what the problem is in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

Happy coding!

1 Like
  1. You should have at least one a element with a class of nav-link .
    and i have it!

  2. All of your .nav-link elements should be anchor (a ) elements.

i dont understand how to anchor this.

  1. All of your .nav-link elements should be in the #navbar .
    i have them in #navbar or not? i think i have them

  2. You should have the same number of .nav-link and .main-section elements.
    i have all but still says i dont.

and some other issues i have but that is for another time.
Thank you.

Thank you!

I suggest removing the class= attribute and removing the quotes from the nav-link. nav-link so it before the a .The href need to have the # id before all of them, and there should be _ between the all words in the href.
Example:

nav-link <a href="#main-section>text</a>

Make sure there are exactly the same amount of nav-link and .main-sections.
Make sure they all have exactly the same Text and id.

I hope this will help you!

Happy coding!

ps: If I missed anything, I apologize.

1 Like
JS Documentation Hello world Declaring variables Variable scope Global variables Data types
 </nav>

All of your .nav-link elements should be in the #navbar !!!

How can i do this , i dont understand?

You 4got to close this list item with </li>.

1 Like

i post in new topic , sorry, you can see it.

1 Like

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