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.
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!
.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:
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>
