Need help on the following:
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<main id=main-doc>
<section class="main-section" id="Rocketships">
<header>Rocketships<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>1</p><p>2</p><p>1</p><p>2</p><p>1</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id="Exploration">
<header>Exploration
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>1</p><p>2</p><p>1</p><p>2</p><p>1</p>
</header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id="Milky_Way">
<header>Milky Way<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>1</p><p>2</p><p>1</p><p>2</p><p>1</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id="Planets">
<header>Planets<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>1</p><p>2</p><p>1</p><p>2</p><p>1</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id="Aliens">
<header>Aliens<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>1</p><p>2</p><p>1</p><p>2</p><p>1</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<nav id=navbar>
<header></header>
<a class = "nav-link" Rocketships></a>
<a class = "nav-link"></a>
<a class = "nav-link">Milky Way</a>
<a class = "nav-link">Planets</a>
<a class = "nav-link">Aliens</a>
</nav>
</html>
</main>
/* file: styles.css */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15
Technical Documentation Page - Build a Technical Documentation Page
What are tests 6, 8, 19, 20, and 22?
What specific lines of your code do you think meet each of those tests?
6. None of your header elements should be empty.8. 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.19. 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”).20. 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).22. Your Technical Documentation project should use at least one media query .
(6) Rocketships to the to 10th </p> tag within the <header> element<header> text matches that of text in id
Can you please quote the specific lines you are talking about
The content of your header elements is very confusing. Why do you have a bunch of p elements with single numbers in there?
Can you see an empty header element in your code? If so, fix it and move on to the next failing test.
Also, please review the HTML boilerplate lecture at https://www.freecodecamp.org/learn/full-stack-developer/lecture-what-is-html/what-is-an-html-boilerplate . Your code is missing required elements.
Couldn’t find any empty header elements.
It’s supposed to be at least two each. Just changed that.
There are supposed to be two p elements inside of each header? Where do the instructions say that?
Ok, but that does not say that the header elements should have two p elements inside of them.
Side note - I’d recommend trying to create some real content so the page looks like something you would be proud to show to others.
2 Likes
<!DOCTYPE html>
<html>
<main id=main-doc>
<section class="main-section" id=Rocketships>
<header>Rocketships</header><p>1</p><p>2</p>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id=Exploration>
<header>Exploration</header><p>1</p><p>2</p>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id=Milky_Way>
<header>Milky Way</header><p>1</p><p>2</p>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id=Planets>
<header>Planets</header><p>1</p><p>2</p>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id=Aliens>
<header>Aliens</header><p>1</p><p>2</p>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<nav id=navbar>
<header>Navigator</header>
<a class = "nav-link" href="#Rockethsips">Rocketships</a>
<a class = "nav-link" href="#Exploration">Exploration</a>
<a class = "nav-link" href="#Milky Way">Milky Way</a>
<a class = "nav-link" href="#Planets">Planets</a>
<a class = "nav-link" href="#Aliens">Aliens</a>
</nav>
</html>
</main>
Exploration link navigates to the Exploration header, not sure why the others don’t.
ILM
November 4, 2025, 4:09pm
14
check if they actually match
1 Like
Got Rocketships and Milky Way to work as well.