Technical Documentation Page - Build a Technical Documentation Page

I feel like I have have addressed the runtime errors so far which are:
*The first child of each .main-section should be a header element.

  • You should have at least 10 p elements (total) within your .main-section elements.
  • Failed:You should have at least five code elements that are descendants of .main-section elements.
  • Failed:You should have at least five li elements that are descendants of .main-section elements.
  • All of your .nav-link elements should be in the #navbar.
  • Failed:You should have the same number of .nav-link and .main-section elements.
  • 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”).
  • Failed: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).

Your code so far I repeated the nav-code, what is the correct usage?

<!=DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css"></link>
<main id="main-doc">
   
<section class="main-section" id="Functional_app">
     <a class="nav-link" href="Functional_app"><header>Functional App
     </a></header>
     <p></p>
     <p></p> 
     <code></code> 
     <li>Create a functional Application</li>
   </section>
   <section class="main-section" id="JavaScript_and_Java"><header><a class="nav-link" href="JavaScript_and_Java">JavaScript and Java</a></header></section>
   <p></p>
     <p></p>
      <code></code>
      <li>JavaScript and Java App</li>  
   <section class="main-section" id="C" href="C"><header><a class="nav-link">C</a></header>
     <p></p>
     <p></p>
      <code></code>
      <li>C</li>
   </section>
   <section class="main-section" id="C++"><a class="nav-link" href="C++"><header>C++</header></a>
   <p></p>
     <p></p>
      <code></code>
      <li>C++</li>
      </section>
   <section class="main-section" id="Python"><a class="nav-link" href="Python"><header>Python</header></a>
     <p></p>
     <p></p>
      
      <code></code>
     <li>Python</li> 
   </section>
   <nav id="navbar"><header><a class="nav-link" href="https://technical-documentation-page.freecodecamp.rocks">Technical Documentation</a></header>
   <a class="nav-link" href="Functional_app">Functional_app</a>
<a class="nav-link" href="JavaScript_and_Java">JavaScript_and_Java</a>
<a class="nav-link" href="C">C</a>
<a class="nav-link" href="C++">C++</a>
<a class="nav-link" href="Python">Python</a></nav>
   </main> 
  </html>
<!-- file: index.html -->
<!=DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css"></link>
<main id="main-doc">
   
<section class="main-section" id="Functional_app">
     <a class="nav-link" href="Functional_app"><header>Functional App
     </a></header>
     <p></p>
     <p></p> 
     <code></code> 
     <li>Create a functional Application</li>
   </section>
   <section class="main-section" id="JavaScript_and_Java"><header><a class="nav-link" href="JavaScript_and_Java">JavaScript and Java</a></header></section>
   <p></p>
     <p></p>
      <code></code>
      <li>JavaScript and Java App</li>  
   <section class="main-section" id="C" href="C"><header><a class="nav-link">C</a></header>
     <p></p>
     <p></p>
      <code></code>
      <li>C</li>
   </section>
   <section class="main-section" id="C++"><a class="nav-link" href="C++"><header>C++</header></a>
   <p></p>
     <p></p>
      <code></code>
      <li>C++</li>
      </section>
   <section class="main-section" id="Python"><a class="nav-link" href="Python"><header>Python</header></a>
     <p></p>
     <p></p>
      
      <code></code>
     <li>Python</li> 
   </section>
   <nav id="navbar"><header><a class="nav-link" href="https://technical-documentation-page.freecodecamp.rocks">Technical Documentation</a></header>
   <a class="nav-link" href="Functional_app">Functional_app</a>
<a class="nav-link" href="JavaScript_and_Java">JavaScript_and_Java</a>
<a class="nav-link" href="C">C</a>
<a class="nav-link" href="C++">C++</a>
<a class="nav-link" href="Python">Python</a></nav>
   </main> 
  </html>
/* file: styles.css */
#navbar{
  position:block;
  left:0;
}
@media (width:275){
  header{
  width:300;
}
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

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