Technical Documentation Page - Build a Technical Documentation Page

Programming HTML-CSS
1

Tell us what’s happening:

i have beenstruggling for the two weeks and i can`t put get this instruction
of: Failed:The header element in the #navbar should come before any link (a) elements also in the #navbar.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Technical Documentation</title>
   <link rel="stylesheet" href="styles.css">
    <h1>Coding Documentation</h1>
    </head>
    <body>
      <main id="main-doc">
        <section class="main-section" id="HTML">
          <header>HTML</header>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
          <code>Code Element 1</code>
  <p>Some text</p>
  <code>Code Element 2</code>
  <pre><code>Code Element 3</code></pre>
  <code>Code Element 4</code>
  <code>Code Element 5</code>
   <nav id="navbar">
            <ul>
            <li><a class="nav-link" href="#HTML">HTML</a></li>
            <li> <a class="nav-link" href="#CSS">CSS</a></li>
            <li><a class="nav-link" href="#JAVASCRIPT">JAVASCRIPT</a></li>
            <li> <a class="nav-link" href="#PYTHON">PYTHON</a></li>
            <li> <a class="nav-link" href="#Additional_Information">Additional Information</a></li>
                </ul>
             </nav>
             <section class="main-section" id="CSS">
          <header>CSS</header>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
                    <nav id="navbar">
                               </nav>
                       <section class="main-section" id="JAVASCRIPT">
          <header>JAVASCRIPT</header>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
           <nav id="navbar">
                               </nav>
           <section class="main-section" id="PYTHON">
          <header>PYTHON</header>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <nav id="navbar">
            <header>Good_Job :)</header>
                    </nav>
           <section class="main-section" id="Additional_Information">
          <header>Additional Information</header>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
            <nav id="navbar">
                                </nav>
                      </section>
          </main>

/* file: styles.css */
h1 {font-size: 30px;
font-weight: bold;
color: red;
font-style: italic;
}
header {font-size: 28px;
font-weight: bold;
color: purple;
font-family: "Times-New-Roman", sans-serif;
text-align: left;
} 
@media screen and(max-width: 368px){}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hello!

I notice two nav both with the id navbar. This is not valid code.
id can only be used once.

You should only need one navbar with the links to the various parts of the document.

You may wish to place the header just under the navbar opening tag with whatever text you want it to have.

I just took a quick glance. I hope these changes can solve the problem for you.

Happy coding!