Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening: Im currently struggling to understand this , Can someone help me?

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”).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html> 
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main-doc">

    <nav id="navbar">
      <header><h1>The nav element<h1></header>
      <a class="nav-link" href="/html/">HTML</a> |
      <a href="/css/">CSS</a> |
      <a href="/js/">JavaScript</a> |
      <a href="/python/">Python</a>
    </nav>



      <section class="main-section" id="First_Header">
        <header><h1>First Header</h1></header>
         <p><code>This</code> paragraph is presented to header 1</p>
         <p>This <code>paragraph</code> is presented to header 1</p>
         <ul>
          <li>Java</li>
          <li>JavaScript</li>
         </ul>
      </section>
      <section class="main-section" id="Second_Header">
         <header><h1>Second Header</h1></header>
         <p>This paragraph <code>is</code> presented to header 2</p>
         <p>This paragraph is presented to header 2</p>
         <ul>
           <li>CSS</li>
           <li>HTML</li>
         </ul>
      </section>
      <section class="main-section" id="Third_Header">
         <header><h1>Third Header</h1></header>
         <p>This paragraph is <code>presented</code> to header 3</p>
         <p>This paragraph is presented to header 3</p>
         <ul>
           <li>Python</li>
           <li>C++</li>
         </ul>
      </section>
      <section class="main-section" id="Fourth_Header">
         <header><h1>Fourth Header</h1></header>
         <p>This paragraph is presented <code>to</code> header 4</p>
         <p>This paragraph is presented to header 4</p>
         <ul>
           <li>React</li>
           <li>Figma</li>
         </ul>
      </section>
      <section class="main-section" id="Fifth_Header">
         <header><h1>Fifth Header</h1></header>
         <p>This paragraph is presented to <code>header</code> 4</p>
         <p>This paragraph is presented to header <code>4</code></p>
        <ul>
          <li>SQL</li>
          <li>PHP</li>
        </ul>
      </section>
    </main>
  </body>
</html>


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

The text of this link is HTML

The section header is “First Header”

Does not match

3

So i need to replace it with the same in the header?

4

Well, it sounds like they will need to match.

1 Like
5

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