Tell us what’s happening:
My navbar <a> elements are not linking to my main section elements. I have the href’s set to the id’s of the sections, but I’m still getting an X next to that requirement when I run the tests. What am I doing wrong? I think all of the spelling and punctuation is the same.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>JS Documentation</header>
<a class="nav-link" class="item1" href="Introduction">Introduction</a>
<br>
<a class="nav-link" class="item2" href="What_you_should_already_know">What you should already know</a>
<br>
<a class="nav-link" class="item3" href="JavaScript_and_Java">JavaScript and Java</a>
<br>
<a class="nav-link" class="item4" href="Hello_world">Hello world</a>
<br>
<a class="nav-link" class="item5" href="Variables">Variables</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p></p>
<p></p>
<code></code>
<li>Introduction</li>
</section>
<section class="main-section" id="What_you_should_already_know">
<header>What you should already know</header>
<p></p>
<p></p>
<code></code>
<li>What you should already know</li>
</section>
<section class="main-section" id="JavaScript_and_Java">
<header>JavaScript and Java</header>
<p></p>
<p></p>
<code></code>
<li>JavaScript and Java</li>
</section>
<section class="main-section" id="Hello_world">
<header>Hello world</header>
<p></p>
<p></p>
<code></code>
<li>Hello world</li>
</section>
<section class="main-section" id="Variables">
<header>Variables</header>
<p></p>
<p></p>
<code></code>
<li>Variables</li>
</section>
</main>
</body>
</html>
/* file: styles.css */
#navbar {
position: fixed;
left: 0;
top: 0;
width: 150px;
background-color: #f0f0f0;
float: left;
}
.main-section {
position: fixed;
right: 0;
width: 200px;
background-color: white;
float: right;
}
@media only screen and (max-width: 150px) {
.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 6;}
.item3 {grid-area: 3 / span 6;}
.item4 {grid-area: 4 / span 6;}
.item5 {grid-area: 5 / span 6;}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page