Technical Documentation Page - Build a Technical Documentation Page

Hello, I’m having an issue with the requirement:
“Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.”

I have back traced this step a few times now and I can’t for the life of me find any error in the grammar, which leads me to believe that my code is incorrectly formatted. I formatted the following code for readability so if no error can be found in the provided code then I can chalk it up to the code that is not shown in this post.

The code so far

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css" />
  <title>Technical Document</title>
  </head>
  <main id="main-doc">
    <nav id="navbar">
      <header><h1>Technical Documentation for the Goalie App</h1></header>
      <ul>
        <li><a class="nav-link" href="#Introduction">Introduction</a></li>
        <li><a class="nav-link" href="#Basic_Requirements">Basic Requirements</a></li>
        <li><a class="nav-link" href="#Goalie_App">Goalie App</a></li>
        <li><a class="nav-link" href="#Features">Features</a></li>
        <li><a class="nav-link" href="#FAQs">FAQs</a></li>
        </ul>
        </nav>

<section id="Introduction" class="main-section">
  <header><h1>Introduction</h1></header>
  </section>

  <section id="Basic_Requirements" class="main-section">
    <header><h1>Basic Requirements</h1></header>
  </section>

  <section id="Goalie_App" class="main-section">
    <header><h1>Goalie App</h1></header>
    </section>
 
 <section id="Features" class="main-section">
    <header><h1>Features</h1></header>
  </section>

  <section id="FAQs" class="main-section">
    <header><h1>FAQs</h1></header>   
  </section>
    </main>
  </html>

This code is passing that test in my browser. Try running in private window or some other browser.

Strange, it’s still not working. I even deleted my existing code and retried it with this simplified version. Thank you for the input, I at least know I’m on the right track! :joy:

image
It is passing this test.

.main-section ------------- a parent
header ----------------- the first child
For example, your ‘section’ element with ‘id’ set to “Goalie_App” doesn’t correspond to ‘header’ element’s text “Goalie App”. For id you added an underscore, but for ‘header’ (h1) you didn’t.
The same goes with the ‘href’ attribute in .nav-link:


As you can see, “Basic_Requirements” is not the same as “Basic Requirements” that you put between ‘a’ tags.

The test asks that I use underscores in place of spaces so I don’t believe that to be the cause. Ive attached a more in-depth version of the code for review. I am still at an utter loss on where the issue is arising - a real brain bender indeed.

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css" />
  <title>Technical Document</title>
  </head>
  <main id="main-doc">
    <nav id="navbar">
      <header><h1>Technical Documentation for the Goalie App</h1></header>
      <ul>
        <li><a class="nav-link" href="#Introduction">Introduction</a></li>
        <li><a class="nav-link" href="#Basic_Requirements">Basic Requirements</a></li>
        <li><a class="nav-link" href="#Goalie_App">Goalie App</a></li>
        <li><a class="nav-link" href="#Features">Features</a></li>
        <li><a class="nav-link" href="#FAQs">FAQs</a></li>
        </ul>
        </nav>
<section id="Introduction" class="main-section">
  <header><h1>Introduction</h1></header>
    <p>xxx</p>
    <p>xxx</p>
  </section>
  <section id="Basic_Requirements" class="main-section">
    <header><h1>Basic Requirements</h1></header>
      <p>It is assumed that by using this app the user has the following background <li>xxx</li>
      <li>xxx</li>
      <li>xxx</li></p>    
  </section>
  <section id="Goalie_App" class="main-section">
    <header><h1>Goalie App</h1></header>
    <p>xxx.</p>
    <p>xxx</p>
    <p>xxx.</p>
  </section>
  <section id="Features" class="main-section">
    <header><h1>Features</h1></header>
    <p>xxx
      <li>xxx</li>
      <li>xxx</li>
      <li>xxx</li>
      <li>xxx</li>
      <li>xxx</li>
      </p>
      <p>xxx</p>
  </section>
  <section id="FAQs" class="main-section">
    <header><h1>FAQs</h1></header>
    <p><h3>xxx</h3></p>
    <p>xxx</p>
    <p><h3>xxx</h3></p>
    <p>xxx</p>
    <p><h3>xxx</h3></p>
      <p>xxx</p>
  </section>
    </main>
  </html>

The code you have posted is passing that specific test for me as well. It is failing two other tests. Maybe try in a different browser.

I downloaded Chrome just for this :joy:
I didn’t want that to be the fix but it was! Thanks all :slight_smile: