Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

i cant figure 2 of instruction from the this task, please help me when i go wrong

this my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technical Documentation Page</title>
    <link rel="stylesheet"  href="styles.css">
  </head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="stone"><header>
        <nav id="navbar">stone
            <ul>
              <li><a class="nav-link" href="#stone"><header>rock</header></a></li>              
           </ul> 
           
          </nav></header>
       
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <code>
          x = 5;
          y = 6;
          z = x + y;
        </code>

      </section>
      <section class="main-section" id="steel">
      <header>steel
          <nav id="navbar">
           <ul>
              <li><a class="nav-link" href="#steel"><header>metal</header></a></li>
          
              </ul>
           </nav></header>    
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <code>
          x = 5;
          y = 6;
          z = x + y;
        </code>
        </section>
      <section class="main-section" id="money">
        <header>money<nav id="navbar">
          <ul>
          <li><a class="nav-link" href="#money"><header>rich</header></a></li>
        </ul>          
          </nav></header>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <code>
          x = 5;
          y = 6;
          z = x + y;
        </code>
      </section>
      <section class="main-section" id="power"><header>power
        <nav id="navbar">
          <ul>
          <li><a class="nav-link" href="#power"><header>less</header></a></li>
        </ul>      
          </nav></header>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <code>
          x = 5;
          y = 6;
          z = x + y;
        </code>
      </section>
      <section class="main-section" id="greed"><header>greed
        <nav id="navbar">
        <ul>
          <li><a class="nav-link" href="#greed"><header>more</header></a></li>
        </ul>          
          </nav></header>
        
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <code>
          x = 5;
          y = 6;
          z = x + y;
        </code>
      </section>
    </main>
  </body>
</html>


      **Your code so far**
      
```html
/* 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>Technical Documentation Page</title>
  <link rel="stylesheet"  href="styles.css">
</head>
<body>
  <main id="main-doc">
    <section class="main-section" id="stone"><header>
      <nav id="navbar">stone
          <ul>
            <li><a class="nav-link" href="#stone"><header>rock</header></a></li>              
         </ul> 
         
        </nav></header>
     
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <code>
        x = 5;
        y = 6;
        z = x + y;
      </code>

    </section>
    <section class="main-section" id="steel">
    <header>steel
        <nav id="navbar">
         <ul>
            <li><a class="nav-link" href="#steel"><header>metal</header></a></li>
        
            </ul>
         </nav></header>    
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <code>
        x = 5;
        y = 6;
        z = x + y;
      </code>
      </section>
    <section class="main-section" id="money">
      <header>money<nav id="navbar">
        <ul>
        <li><a class="nav-link" href="#money"><header>rich</header></a></li>
      </ul>          
        </nav></header>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <code>
        x = 5;
        y = 6;
        z = x + y;
      </code>
    </section>
    <section class="main-section" id="power"><header>power
      <nav id="navbar">
        <ul>
        <li><a class="nav-link" href="#power"><header>less</header></a></li>
      </ul>      
        </nav></header>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <code>
        x = 5;
        y = 6;
        z = x + y;
      </code>
    </section>
    <section class="main-section" id="greed"><header>greed
      <nav id="navbar">
      <ul>
        <li><a class="nav-link" href="#greed"><header>more</header></a></li>
      </ul>          
        </nav></header>
      
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <code>
        x = 5;
        y = 6;
        z = x + y;
      </code>
    </section>
  </main>
</body>
</html>

/* file: styles.css */
@media (min-width:769px){
body{
  width:90%;
}
}
 these are the missing instruction to complete it:
1. Your #navbar should have exactly one header element within it.
2. 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").
3. The header element in the #navbar should come before any link (a) elements also in the #navbar.

  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

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