Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

This is getting me out of my nerves. I am doing the exacty same thing i’m told to do, and it still doesn’t work. Please fix this.

Your code so far

<!-- 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>Document</title>
  </head>

  <body>
    <nav id="navbar">
      <header>
        topic of the technical documentation
      </header>
      <ul>
        <li><a class="nav-link" href="#title1">Title1</a></li>
        <li><a class="nav-link" href="#title2">Title2</a></li>
        <li><a class="nav-link" href="#title3">Title3</a></li>
        <li><a class="nav-link" href="#title4">Title4</a></li>
        <li><a class="nav-link" href="#title5">Title4</a></li>
      </ul>
    </nav>  
    <main id="main-doc">
      <section class="main-section" id="title1">
        <header>Title1</header>
        <p>Lorem</p>
        <p>Lorem</p>
        <code></code>
        <ul>
          <li></li>
        </ul>
      </section>
      <section class="main-section" id="title2">
        <header>Title2</header>
        <p>Lorem</p>
        <p>Lorem</p>
        <code></code>
        <ul>
          <li></li>
        </ul>
      </section>
      <section class="main-section" id="title3">
        <header>Title3</header>
        <p>Lorem</p>
        <p>Lorem</p>
        <code></code>
        <ul>
          <li></li>
        </ul>
      </section>
      <section class="main-section" id="title4">
        <header>Title4</header>
        <p>Lorem</p>
        <p>Lorem</p>
        <code></code>
        <ul>
          <li></li>
        </ul>
      </section>
      <section class="main-section" id="title5">
        <header>Title5</header>
        <p>Lorem</p>
        <p>Lorem</p>
        <code></code>
        <ul>
          <li></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/131.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

The problem is with the

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

It isnt helping in telling me WHY is it that my stuff isn’t exactly what’s being asked.

3

Welcome to the forum @Rovstam

You also need to match the casing of the text.

Happy coding

4

Hi there your header have first latter capitalized and your nav link start with lowercase.

5

It does NOT matter. I already tried that. Nothing.

6

double check this one

7

My god THANK YOU i did NOT see that one. Duck.