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>     
      <a href="#Hello_world">Hello world</a>
      <a href="#Declaring_variables">Declaring variables</a>
      <a href="#Variable_scope">Variable scope</a>
      <a href="#Global_variables">Global variables</a>
      <a href="#Data_types">Data types</a>
      
     </nav>
  <div/>

<main id="main-doc">

<section class="main-section" id="Hello_world" id="nav-link" >
<header>Hello world</Header>
<p><a class="nav-link" href="#Hello_world">Hello world</a>
  <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><a class="nav-link" href="#Declaring_variables">Declaring variables</a>
  <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><a class="nav-link" href="#Variable_scope">Variable scope</a>
  <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><a class="nav-link" href="#Global_variables">Global variables</a>
  <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><a class="nav-link" href="#Data_types">Data types</a>
  <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;
}
@media (max-width: 768px) {
  #nav {
    width: 358px;
  }

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

Hello!

You forgot to put the nav-links before the anchors.

1 Like

i am stuck, please another help.

Tests

  • Passed:You should have a main element with an id of main-doc.

  • Passed:You should have at least five section elements with a class of main-section.

  • Passed:All of your .main-section elements should be section elements.

  • Passed:You should have at least five .main-section elements that are descendants of #main-doc.

  • Passed:The first child of each .main-section should be a header element.

  • Passed:None of your header elements should be empty.

  • Passed:All of your .main-section elements should have an id.

  • Passed:Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.

  • Passed:You should have at least 10 p elements (total) within your .main-section elements.

  • Passed:You should have at least five code elements that are descendants of .main-section elements.

  • Passed:You should have at least five li elements that are descendants of .main-section elements.

  • Passed:You should have a nav element with an id of navbar.

  • Passed:Your #navbar should have exactly one header element within it.

  • Passed:You should have at least one a element with a class of nav-link.

  • Passed:All of your .nav-link elements should be anchor (a) elements.

** Failed:All of your .nav-linkelements should be in the#navbar.*

  • Passed:You should have the same number of .nav-link and .main-section elements.

  • Passed:The header element in the #navbar should come before any link (a) elements also in the #navbar.

  • Passed:Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

  • Passed: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).

  • Passed:Your #navbar should always be on the left edge of the window.

  • Passed:Your Technical Documentation project should use at least one media query.

Did you complete it?

yes, i saw i have extra nav-links in section elements, but not in nav anchor.
that was the issue.
thank you

1 Like

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