Tell us what’s happening:
1.I cannot seem to match the .main-section and .nav-link elements.
2.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”)
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<main id="main-doc" id=".main-section">
<section class="main-section" id="Sports Fans">
<link rel="stylesheet" href="styles.css">
<section class="main-section" id=".main-section" id= "Football"</section>
<header>Football</header>
<section class="main-section"id=".main-section" id="Basketball"></section>
<header>Basketball</header>
<section class="main-section" id=".main-section id="Tennis" ></section>
<header>Tennis</header>
<section class="main-section" id=".main-section" id="Boxing"></section>
<header>Boxing</header>
<section class="main-section"id=".main-section" id="Ice-Hockey"></section>
<header>Ice-Hockey</header>
<section><href="main-section"
<div id="side-nav">
<nav id="navbar">
<header id="head" align="left">Sports Fans</header>
<ul>
<li><a class="nav-link" id=".nav-link">
<li><a class=".nav-link" href="Football">Football</a></li>
<li><a class=".nav-link" href="Basketball">Basketball</a></li>
<li><a class=".nav-link" href="Tennis">Tennis</a></li>
<li><a class=".nav-link" href="Boxing">Boxing</a></li>
<li><a class=".nav-link" href="Ice-Hockey"> Ice-Hockey</a></li>
</ul>
</nav>
/* file: styles.css */
#main{
background-color: rgb(120, 40, 55);
width: 100px;
height: 45px;
}
.nav{
position: absolute;
color: rgb(20, 20, 100)
}
@media (max-width: 120px){
.h1{
color: black;
}
.nav-bar{
float: left;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
Please Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!
1 Like
The number of .main-section and .nav-link elements are supposed to be the same but it seems that after counting them that they are equal.
2 Likes
Hello! It appears the opening tag is missing the closing bracket > here.
This may be why you are receiving the error message.
[[quote=“Created-Unique, post:4, topic:700233, full:true”]
Hello! It appears the opening tag is missing the closing bracket > here.
This may be why you are receiving the error message.
[/quote]
Football
I added the > closing tag after Football and it did’nt make any difference
There are too many errors in HTML code. Check it for yourself:
1 Like
Hello! Sorry, I noticed all of your headers appear to be after the sections, instead of being nested within them.
However, @DobarBREND is correct there are more problems with the code, and the verification link provided in their post will help you find the errors.
Suggestion: Try to fix one error at a time. For instance, all of the headers relocation could be one error to fix.
Run it through the verification again, and find any other errors to fix.
I usually make the changes with the code in the verification and run it that way. In this way, I can fix it all and eventually I get the green showing it is all good.
Then, I copy that code and replace the original in my project with my revised version from the verification application.
This is how I do my projects.
Keep up your good progress!
Hi I have made some adjustments and was just one small task from completing the project but I ended up losing some of that progress and wanted to know what I need to do to complete these tasks. I keep ticking off boxes then to undo my progress. Tasks are as follows
5 main You should have at least five section elements with a class of main-section .
You should have at least five .main-section elements that are
descendants of #main-doc
5 main-section
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page.
Hello!
Try making sure all of your code is within the main-doc opening and closing tags, as this is where our focus is for the document. Kind of like have the roof and the ground floor, everything is between them.
For code to be a descendent of another code, it needs to be entered somewhere between the opening code tag of the parent, and the closing tag for the parent.
Here is an example of article elements being descendents of fieldset elements (for example purposes only.)
<fieldset id="test">
<article id="first"></article>
<p>This is also a descendent of the #test fieldset.</p>
<article id="second"></article>
</fieldset>
I have both articles and a p element which are descendents of the fieldset with the id of test.
I hope this helps you understand a bit more.
Keep up the good progress.
Tell us what’s happening:
I have a problem identifying the descendants of main-doc, the li descendants of main-section. Also I am getting an error that each nav-link should correspond to main-section elements.
Finally should I be using the styles.css?
My code…
I ticked another box or two since your last support so appreciate that.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<main id="main-doc" id="main-section">
<html lang="en>"
<head><meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section id="main-doc"><section class=".main-section">
<body>
<link rel="stylesheet" href="styles.css">
<title>Sports Fans</title>
</head>
<body>
<p></p>
<p></p>
<code></code>
<section></section>
<section class="main-section" id=".main-section" id="Introduction"></li><
<header><p><code>Introduction</code></p></header>
</section>
<li> <section class=".main-section" class="main-section" id="Snooker" </section</li>
<header><p><code>Snooker</code></p></header>
<li><section class=".main-section" class="main-section" id="Football"></section></li>
<header><p><code>Football</code></p></header>
<li><section class= ".main-section" class="main-section" id="Basketball" ></li></section>
<header><p><code>Basketball</code></p></header>
<li><section class=".main-section" class="main-section"id="Tennis"><section></li>
<header><p><code>Tennis</code></p></header>
</li>
</section>
<li><section class=".main-section" class="main-section" id="Boxing" ></section></li>
<header><p><code>Boxing</code></p></header>
</section>
<li><section class=".main-section" class="main-section" id="Ice-Hockey" ></section></li>
<header><p><code>Ice-Hockey</code></p></header>
</section
<li><section class=".main-section" class="main-section" id="Swimming"></section</li>
<header><p><code>Swimming</code></p></header>
<li><section class=".main-section" class="main-section" id="Rugby" ></section</li>
<header><p><code>Rugby</code></p></header>
<p></p>
<p></p>
<code></code>
<li><section class=".main-section" class="main-section" id="Hurling" ></section</li>
<header><p><code>Hurling</code></p></header>
</section>
<li><section class=".main-section"class="main-section" id="Judo" ></section</li>
<header><p><code>Judo</code></p></header>
</section id=".main-doc">
</section>
</section>
<div id="side-nav">
<nav id="navbar">
<header id="head" align="left">Sports Fans</header>
<ul>
<li><a class="nav-link" id=".nav-link">
<li><a class=".nav-link" href="Snooker">Snooker</a></li>
<li><a class=".nav-link" href="Football">Football</a></li>
<li><a class=".nav-link" href="Basketball">Basketball</a></li>
<li><a class=".nav-link" href="Tennis">Tennis</a></li>
<li><a class=".nav-link" href="Boxing">Boxing</a></li>
<li><a class=".nav-link" href="Ice-Hockey"> Ice-Hockey</a></li>
<li><a class=".nav-link" href="Swimming">Swimming</a></li>
<li><a class=".nav-link" href="Rugby">Rugby</a></li>
<li><a class=".nav-link" href="Hurling">Hurling</a></li>
<li><a class=".nav-link" href="Judo">Judo</a></li>
</ul>
</navbar>
</nav>
</section class=".main-section"></section id=".main-doc">
</main-doc>
</main>
</html>
</ul>
</nav>
/* file: styles.css */
#main{
background-color: rgb(120, 40, 55);
width: 100px;
height: 45px;
}
}
.nav{
position: absolute;
color: rgb(20, 20, 100)
}
@media (max-width: 120px){
.h1{
color: black;
}
.nav-bar{
float: left;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
Any ideas on how I can go about the rest of this task. I already put the main-doc element before the main code
Hi I am wondering how to connect the main-section and .nav-link parts. Can you check over my code to see where I am going wrong.
You have too many errors in your html. Please fix the errors first as you heard from others in earlier responses.
Hi. I followed your advice but keep getting stuck .putting the headers nested within the sections helped but I still need extra support
Please post your full updated code
1 Like
Hello!
I am sorry that it does not appear to be working for you.
There are some great people in the forum, Staff, Moderator/Leaders, and other learners, like you and me, who may be able to better clarify guidance to help you through this step.
Wishing you good progress on your coding journey. 
I don’t see any code there. You need to paste your code into a post.
That is the link to the step. Please post your code.
