I keep getting a “None of your header elements should be empty” and the " 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”)." errors. All of the headers are filled and the nav links go to the correct places when clicked. Anyone see my problem?
**Your code so far**
/* file: index.html */
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
<section class="main-section" id="intro">
<header>Intro</header>
<p>A test to show your skill in mimicking other sites.</p>
</section>
<section class="main-section" id="items_needed">
<header>Items Needed</header>
<p>These are all the items you will be needing to complete this task</p>
<ul>
<li>A computer</li>
<li>A monitor</li>
<li>A keyboard</li>
<li>A mouse</li>
<li>Internet connection</li>
</ul>
<p>Not having one or more of these items will result in a very difficult time completing the test</p>
</section>
<section class="main-section" id="instructions">
<header>Instructions</header>
<p>In this test we'll be writing out a site that mimics the technical documentation page that was provided before.</p>
<p>To start out you'll need to make a <code>main</code> tag to wrap everything you'll be writing in. Then follow it up with several <code>section</code> elements to seperate all your work into nice little piles. Third fill those sections with <code>header</code> elements to define what is going in each of those piles. Then you can finally fill each of those sections up with all sorts of <code>p</code>, <code>code</code>, and <code>li</code> elements to complete this test.</p>
<p>After doing all of this you can move on to your css to make the app look half decent. Do as much or as little as you want but make sure it is functional and clean...ish.</p>
<p>Congratulations! You have now completed this test.</p>
</section>
<section class="main-section" id="watch_out">
<header>Watch Out</header>
<p>Some problems may come up while you're working on this project. Take time to double check everything, and I mean everything, because it is most likely a silly mistake or an overlooked closing tag.</p>
<p>A common one that I run in to are switching up class and id and their respective . and # calls in the css section.</p>
</section>
<section class="main-section" id="conclusion">
<header>Conclusion</header>
<p>Now that you have completed this test you can go and make so many more technical documentation apps. If you enjoyed this test you may have a career in doing many of these or in working on massive ones like w3schools.com and others like it.</p>
<p>Happy Coding!</p>
</section>
</main>
<nav id="navbar">
<header>Technical Documentation Test</header>
<a class="nav-link" href="#intro">Intro</a>
<a class="nav-link" href="#items_needed">Items Needed</a>
<a class="nav-link" href="#instructions">Instructions</a>
<a class="nav-link" href="#watch_out">Watch Out</a>
<a class="nav-link" href="#conclusion">Conclusion</a>
</nav>
/* file: styles.css */
html {
background: #3e4285;
}
#main-doc {
margin-left: 210px;
color: white;
height: 100%;
}
header {
font-size: 1.2em;
font-weight: bold;
}
code {
background: black:
color: white;
}
.nav-link {
text-decoration: none;
color: white;
display: list-item;
border-top: 1px solid;
padding-top: 10px;
padding-bottom: 10px;
}
@media (min-width: 600px) {
#navbar{
position: fixed;
z-index: 999;
left: 0;
top: 0;
height: 100%;
width: 200px;
border-right: solid;
display: block;
margin: 10px;
text-align: center;
font-size: 1.5em;
color: white;
}
}
@media (max-width: 600px) {
#navbar{
visibility: hidden;
}
#main-doc {
margin-left: 0;
}
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Technical Documentation Page
Link to the challenge:
