Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I cant seem to pass the stage that says i must have a nav link that corresponds with the header and matching the main-section with texts that match first child

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Technical Documentation Page</title>
    <meta charset="UTF-8"></meta>
    <meta name="viewport" content="width=devive-width, initial-scale=1.0"></meta>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Technical Documentation Page</h1>
    <main id="main-doc">
       <header id="infor">Programming</header>
      <section class="main-section" id="HTML_Properties">    
      <header>HTML Properties
        <code>
        <hr>
        <h2>Programmimg with css and html</h2>
        <div id="question">
        <p>What does Html stand for?</p>
        <ul>
          <li>hyper text markup language</li>
          <li>hyper technical markup language</li>
          <li>hype text markup language</li>
        </ul>
      </div>
      </header>
      </code>
      </section>
      <section class="main-section" id="Hello_world">
         <header>Hello world<header>
           <p>Code using css and html only</p>
         <footer>         
           <code>
           <nav id="navbar">
             <header>Programming</header>  
              <li><a class="nav-link" href="Hello_world">Hello world</a></li>  
       <a class="nav-link" href="HTML_Properties">HTML Properties<a/>, 
       <a class="nav-link" href="CSS_Properties">CSS Properties</a>, 
       <a class="nav-link" href="JAVASCRIPT_Properties">JAVASCRIPT Properties</a>, 
       <a class="nav-link" href="BOOTSTRAP_Properties">BOOTSTRAP Properties</a> AND 
       <a class="nav-link" href="FIGMA_Properties">FIGMA Properties</a>
            
       </nav>
       </header>
           </code>
               </footer>
               </header>
               </code>
       </section>
       <br>
        <section  class="main-section" id="FIGMA_Properties">
          <header>FIGMA Properties</header>
          <code>
          <p>Describe your experiences in the technical world</p>
          <ol>
            <li>Overwhelming</li>
            <li>Fascinating</li>
            <li>Prefer not to say</li>
            </ol>
            <p>Answer with all honesty!</p>
        </code> 
        </section>
         <section  class="main-section" id="BOOTSTRAP_Properties">
           <header>BOOTSTRAP Properties</header>
           <code>
    <p>Who invented television?</p>
    <p>In what year was cellphone invented?</p>
    <p>Who owns TESLA?</p>
    <p>How many volts does it take to power a car engine?</p>
    </code>
         </section>
         <hr>
          <section  class="main-section" id="JAVASCRIPT_Properties">
            <header>JAVASCRIPT Properties</header>
            <code>
            <p>What are your plan for the near future?</p>
            <p>In the next ten ears how much do you the think technology would have revolutionised</p>
            </code>
          </section>
          <section class="main-section" id="CSS_Properties">
 <header>CSS Properties</header>  
            <code>
              <ul>
                <li>Earth</li>
                <li>Mars</li>
                <li>Pluto</li>
                <li>Venus</li>
              </ul>
            </code>
          </section>
    </main>
  </body>
</html>
/* file: styles.css */
#main{
  background-color: rgb(120, 40, 55);
  width: 100px;
  height: 45px;
}
.nav{
  position: absolute;
  color: rgb(20, 20, 100)
}
@media (max-width: 120px){
  .h1{
    color: black;
  }
  .nav-bar{
    float: left;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

I put your question in the body of your post so that it is easier to read.

each main-section should have an id that matches the text of its first child element

Try pasting your html into the online validator below and fixing as many of the reported errors that you can (you can ignore any warnings).

This will help clean up the code and may solve one or more of the issues you have.
If you still need help after that, let us know.

thanks
I’ve eleminated most of my problems

Do you still need help with the original task?

i am almost done coding it, just trying to fix one last error

1 Like

cant seem to get the nav ink to correspond with the main-section

Can you post your updated code so we have the latest to work with?

Make sure that you use exact values of the ids used in the main-section.
Including capitals.

got it thanks, its now working

2 Likes

Great work!! :tada: :balloon: woot woot