I’m having trouble with tests seven, eight, eleven, and twenty. I’m not sure the system thinks that there is one descendant of .main-section that does not have an id. Also, I’m having trouble making the preview make the navbar on the side. Can anyone help me?
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
</head>
<html>
<nav id="navbar">
<header class="title">Basic HTML Tags</header>
<br></br>
<ul>
<li><a class="nav-link" href="#Heading_Tags">Heading Tags</a></li>
<li><a class="nav-link" href="#Paragraph_Tags">Paragraph Tags</a></li>
<li><a class="nav-link" href="#Classes_and_ID's">Classes and ID's</a></li>
<li><a class="nav-link" href="#Anchor_Tags">Anchor Tags</a></li>
<li><a class="nav-link" href="#Meta_Tags">Meta Tags</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section">
<header id="Heading_Tags">Heading Tags</header>
<p id="brief-description">
<ul>
<li>h1</li>
<li>h2</li>
<li>h3</li>
<li>h4</li>
<li>h5</li>
<li>h6</li>
</ul>
</p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Paragraph_Tags">Paragraph Tags</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Classes_And_ID's">Classes and ID's</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Anchor_Tags">Anchor Tags</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Meta_Tags">Meta Tags</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
</main>
</html>
</html>
/* file: styles.css */
html {
box-sizing: border-box;
font-family: tahoma;
}
header {
font-size: 1.5em;
}
p {
font-size: 0.75em;
}
#navbar {
width: 200px;
border-width: 2px;
display: block;
text-align: left;
}
#navbar > header {
display: inline;
margin-bottom: 10px;
}
User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Technical Documentation Page - Build a Technical Documentation Page
Also, when I click on the links in the #navbar , it doesn’t actually link to an element. For some reason, it links to my script (the page on freecodecamp where I edit my code).
This part is a known bug with an open issue being worked on
ILM
March 17, 2025, 7:20pm
4
it’s the section element that should have the id
relevant user story:
Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header “JavaScript and Java” should have a corresponding id="JavaScript_and_Java")
I’ve got most of it down now, except for tests 8 and 20. How do I link the navbar with the corresponding section correctly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
</head>
<html>
<nav id="navbar">
<header class="title">Basic HTML Tags</header>
<br></br>
<ul>
<li><a class="nav-link" href="#Heading_Tags">Heading Tags</a></li>
<li><a class="nav-link" href="#Paragraph_Tags">Paragraph Tags</a></li>
<li><a class="nav-link" href="#Classes_and_ID's">Classes and ID's</a></li>
<li><a class="nav-link" href="#Anchor_Tags">Anchor Tags</a></li>
<li><a class="nav-link" href="#Meta_Tags">Meta Tags</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section">
<header id="Heading_Tags">Heading Tags</header>
<p id="brief-description"></p>
<ul>
<li>h1</h1>
<li>h2</h1>
<li>h3</h1>
<li>h4</h1>
<li>h5</h1>
<li>h6</h1>
</ul>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Paragraph_Tags">Paragraph Tags</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Classes_And_ID's">Classes and ID's</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Anchor_Tags">Anchor Tags</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Meta_Tags">Meta Tags</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
</main>
</html>
</html>
ILM
March 18, 2025, 4:00pm
9
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
The above id attribute value and header text isn’t matches exactly
ILM
March 18, 2025, 4:44pm
11
you are still failing test 7: All of your .main-section elements should have an id .
none of them have an id
you must satisfy this before debugging for tests 8 and 20
This is my code:
All of the elements have id’s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
</head>
<html>
<nav id="navbar">
<header class="title">Basic HTML Tags</header>
<br></br>
<ul>
<li><a class="nav-link" href="#Heading_Tags">Heading Tags</a></li>
<li><a class="nav-link" href="#Paragraph_Tags">Paragraph Tags</a></li>
<li><a class="nav-link" href="#Classes_and_ID's">Classes and ID's</a></li>
<li><a class="nav-link" href="#Anchor_Tags">Anchor Tags</a></li>
<li><a class="nav-link" href="#Meta_Tags">Meta Tags</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section">
<header id="Heading_Tags">Heading Tags</header>
<p id="brief-description"></p>
<ul>
<li id="header">h1</h1>
<li id="header">h2</h1>
<li id="header">h3</h1>
<li id="header">h4</h1>
<li id="header">h5</h1>
<li id="header">h6</h1>
</ul>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Paragraph_Tags">Paragraph Tags</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Classes_and_ID's">Classes and ID's</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Anchor_Tags">Anchor Tags</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
<section class="main-section">
<header id="Meta_Tags">Meta Tags</header>
<p id="brief-description"></p>
<p id="applications"></p>
<code id="example-code"></code>
</section>
</main>
</html>
</html>
ILM
March 18, 2025, 8:20pm
13
this .main-section element has no id, only the class
same here
same here
should I continue?
yes, please ( thank you )
sorry I didn’t mean that sarcastically
ILM
March 18, 2025, 8:25pm
16
they all have the same issue, I can continue but I would be writing the same thing other 2 times
these also have the same issue
none of the .main-section elements have an id
THANK YOU ILM, YOU ARE AN AMAZING PERSON I HAVE FIXED TEST 7!
ILM
March 18, 2025, 8:30pm
18
I tried earlier to point this out
please remember that if you have questions on what people say you should ask those questions
now, all I have to fix is test 8, but i’m pretty sure all my text matches the id
Basic HTML Tags
Heading Tags
brief-description
applications
example-code
Paragraph Tags
brief-description
applications
example-code
Classes and ID's
brief-description
applications
code
Anchor Tags
brief-description
applications
example-code
Meta Tags
brief-description
applications
example-code
okay I just made the code block display
Are you able to format this code so it’s readable?
