jguner
March 7, 2025, 2:32pm
1
All of your .nav-link elements should be in the #navbar .
What am I missing?
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<head></head>
<body></body>
<nav id="navbar"><header>Technical Documentation Page</header>
<ul>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#d">D</a></li>
<li><a href="#e">E</a></li>
</ul>
</nav>
<a class="nav-link"></a>
<main id="main-doc">
<section class="main-section" id="A"><header>A</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="B"><header>B</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="C"><header>C</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="D"><header>D</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="E"><header>E</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
</main>
</html>
/* file: styles.css */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Technical Documentation Page - Build a Technical Documentation Page
Remember, JavaScript is case sensitive.
jguner
March 7, 2025, 2:54pm
3
This is HTML, not JavaScript.
Sure is.
1 Like
jguner
March 7, 2025, 3:26pm
5
I was able to solve this, thank you!
jguner
March 7, 2025, 3:32pm
6
You should have the same number of .nav-link and .main-section elements.
I have 5 nav link elements and 5 sections, what am I doing incorrectly?
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<head></head>
<body></body>
<nav id="navbar">
<header id="header-contents"><u>Technical Documentation Page</u></header>
<a class="nav-link"></a>
<ul>
<a class="nav-link" href="#A"><li>A</a></li>
<a class="nav-link" href="#B"><li>B</a></li>
<a class="nav-link" href="#C"><li>C</a></li>
<a class="nav-link" href="#D"><li>D</a></li>
<a class="nav-link" href="#E"><li>E</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="A"><header>A</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="B"><header>B</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="C"><header>C</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="D"><header>D</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="E"><header>E</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
</main>
</html>
/* file: styles.css */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Technical Documentation Page - Build a Technical Documentation Page
The basic structure of your HTML is off. Please take a look at this video (or read the transcript) to learn how you can use an HTML boilerplate to make sure your basic structure is set up correctly when you start a project:
HTML Boilerplate
ILM
March 7, 2025, 5:01pm
8
what about this one?
I have merged your two topics, please do not open multiple topics for the same challenge
jguner
March 12, 2025, 6:58pm
9
I am still not able to figure this out despite changing my format to be more of a basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header id="header-contents"><u>Technical Documentation Page</u></header>
<a class="nav-link"></a>
<ul>
<li><a class="nav-link" href="#A"><li>A</a></li>
<li><a class="nav-link" href="#B"><li>B</a></li>
<li><a class="nav-link" href="#C"><li>C</a></li>
<li><a class="nav-link" href="#D"><li>D</a></li>
<li><a class="nav-link" href="#E"><li>E</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="A"><header>A</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="B"><header>B</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="C"><header>C</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="D"><header>D</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
<section class="main-section" id="E"><header>E</header>
<code></code>
<p></p>
<p></p>
<li></li>
</section>
</main>
<footer><a href="https://freecodecamp.org">freeCodeCamp</a>
</footer>
</body>
</html>
ILM
March 12, 2025, 6:59pm
10
jguner:
<a class="nav-link"></a>
again, what’s this line doing?
jguner
March 12, 2025, 7:20pm
11
I didn’t see your first comment, I thought it was needed for the navigation links. I removed that, but still see the error.
ILM
March 12, 2025, 8:08pm
12
check what elements you have here
Looking at too many JS posts this morning. The point is an id of “A” is not the same as an id of “a” any more than an id of “hello” is not the same as an id of “HEllo.”