I have gotten all of the tests correct except this one: "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) " and I know the problem is in my “a” links, but I don’t know how to fix it.
<!-- file: index.html -->
<main id="main-doc">
<section class="main-section" id="Making_Code">
<header>Making Code</header>
<p>Coding can be easy, though it can also be hard. Sometimes it is easy to write but hard to understand, and sometimes vice versa. Either way, I'm gonna show you have to correctly make basic starter code.<br></p>
<p>We'll be working with HTML. </p>
</section>
<section class="main-section" id="Step_1">
<header>Step 1</header>
<p>Start with this:<code> !DOCTYPE html </code></p>
<p>Make sure to add < before and > after.</p>
</section>
<section class="main-section" id="Step_2">
<header>Step 2</header>
<p> Have a html element with this:
<code>lang ="en"</code> inside it.</p>
<p> don't forget to put the "en" inside quotation marks!</p>
</section>
<section class="main-section" id="Step_3">
<header>Step 3</header>
<p>Add one head and one body element. Put a meta element inside the head, and give the meta a <code>charset="UTF-8"</code> </p>
<p>in another meta give it a name of viewport and <code>content="width=device-width, initial-scale=1.0"</code></p>
</section>
<section class="main-section" id="Step_4">
<header>Step 4</header>
<p>Still inside the head, add a title, then continue with your code!</p>
<p>remember:
<ul>
<li>The !DOCTYPE doesn't have a closing tag.</li>
<li>only use the meta <code>content="width=device-width, initial-scale=1.0" when you are making a responsive webpage.</code></li>
<li>the meta doesn't need a closing tag.</li>
<li>Don't feel bad if you don't get it right at first, all greatness takes time.</li>
<li>There is a difference between html and css.</li>
</ul>
</p>
</section>
</main>
<nav id="navbar">
<header>
<a class="nav-link" href="Making_Code">Making Code</a>
<a class="nav-link" href="!DOCTYPE html">Step 1</a>
<a class="nav-link" href="lang="en"">Step 2</a>
<a class="nav-link" href="charset="UTF-8"">Step 3</a>
<a class="nav-link" href="remember:">Step 4</a>
</header>
</nav>
<link rel="stylesheet"
href="styles.css">
/* file: styles.css */
@media (max-width: 1000px){
body{ background: white;
}
}
.main-section{font-family: Times New Roman;}
a{font-family: Times New Roman;}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page