Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Good evenng all,
I am stuck on this stage for the completion of my Technical documentation Page. i keep getting these 3 errors inspite of my efforts - as follows:
Your #navbar should have exactly one header element within it.

Each .nav-link should have an href attribute that links to its corresponding .main-section

Your Technical Documentation project should use at least one media query

please help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en"></html
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
  <section id="Introduction"  class="main-section">
    <header>Introduction</header>
    <nav id="navbar"><header>Introduction</header>
   <a class="nav-link" href="https://#navbar.introduction.com">Introduction</a>
    </nav>
    <p></p>
    <p></p>
    <code></code>
  </section>
  <section id="AfCFTA_Implementation" class="main-section">
  <header>AfCFTA Implementation</header>
  <nav id="navbar"><header>AfCFTA Implementation</header>
  <a class="nav-link" href="https://#navbar.AfCFTA_Implementation.ng.com">AfCFTA Implementation</a>   
    </nav>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <code></code>
  </section>
  <section id="Literature"  class="main-section">
    <header>Literature</header>
  <nav id="navbar"><header>Literature</header>
  <a class="nav-link" href="https://#navbar.Literature/afcfta.com">Literature</a>
    </nav>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <li></li>
  </section>
  <section id="Methodology_and_Analysis"  class="main-section">
    <header>Methodology and Analysis</header>
    <nav id="navbar"><header>Methodology and Analysis</header>
    <a class="nav-link" href="https://#navbar.Methodology_and_Analysis.com">Methodology and Analysis</a>
    </nav>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <code></code>
    <code></code>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </section>
  <section id="Recommendations_and_Conclusion" class="main-section">
<header>Recommendations and Conclusion</header>
<nav id="navbar"><header>Recommendations and Conclusion</header>
    <a class="nav-link" href="https://#navbar.Recommendations_and_Conclusion.com">Recommendations and Conclusion</a>
    </nav>
    <p></p>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
    <li></li>
    <li></li>
  </section>
</main>

/* file: styles.css */
#navbar
{
text-align: left;
}

@media (max-width: 1100px) {
{
  background-color: blue;
}

}

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

Hi there!
html closing tag is not correct. And also should be goes in the end of your all elements.

3

The navbar should be separately added. You have it within the section.

nav link’s href value should matched with the corresponding section’s id.
You have added a url instead of it.

4

You have added navbar for each section. You need to add one navbar nav element for all corresponding sections elements.

5

Your media didn’t have any css selector within it.

6

thank you very much, i truly appreciate

7

I did what i could as advised, i had two errors rectified but i still don’t understand how to solve the other two issues, see below:

  1. Your #navbar should have exactly one header element within it. (this one baffles me most. i thought i had handled it but no)
  2. 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).

thanks for your assist

8

Just count how many header elements are inside the nav element. There should be exactly one.

And for the other issue, test each nav link to make sure they link properly.

9

Post your updated code here.