Tell us what’s happening:
These two are not satisfying. What should I do?
- 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”).
- 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).
Your code so far
<!-- file: index.html -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>JS Documentation</header>
<ul>
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#What_should_you_know">What you should know</a><li>
<li><a class="nav-link" href="#Javascript">Javascript</a></li>
<li><a class="nav-link" href="#Hello_World">Hello World</a></li>
<li><a class="nav-link" href="#Variables">Variables</a></li>
<li><a class="nav-link" href="#Declaring_Variables">Declaring Variables</a></li>
<li> <a class="nav-link" href="#Global_Variables">Global Variables</a></li>
<li><a class="nav-link" href="#Constants">Constants</a><li>
<li><a class="nav-link" href="#Data_Types">Data Types</a><li>
<li><a class="nav-link" href="#if_else_statement">if else statement</a><li>
<li><a class="nav-link" href="#While_statement">While statement</a><li>
<li><a class="nav-link" href="#Function_Declarations">Function Declarations</a><li>
<li><a class="nav-link" href="#References">References</a><li></ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="main-section" id="What_should_you_know">
<header>What should you know</header></section>
<section class="main-section" id="Javascript"><header>Javascript</header>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="main-section" id="Hello_World"><header>Hello World</header></section>
<section class="main-section" id="Variables"><header>Variables</header></section>
<section class="main-section" id="Declaring_Variables"><header>Declaring Variables</header></section>
<section class="main-section" id="Global_variables"><header>Global Variables</header
<code></code>
<code></code>
</section>
<section class="main-section" id="Constants"><header>Constants</header></section>
<section class="main-section"id="Data_Types"><header>Data Types</header>
<p></p>
<p></p>
<p></p>
<p></p>
</section>
<section class="main-section" id="if_else_statement"><header>if else statement</header>
<code></code>
<code></code>
</section>
<section class="main-section" id="While_Statements"><header>While Statements</header>
<p></p>
<p></p>
<p></p>
<p></p>
<code></code>
<code></code>
</section>
<section class="main-section" id="Function_Declarations"><header>Function Declarations</header>
<p></p>
<p></p>
<p></p>
<p></p>
</section>
<section class="main-section" id="References"><header>References</header></section>
</main>
</body>
</html>
/* file: styles.css */
#navbar {
text-align: left;
}
@media screen and (max-width: 992px) {
body {
background-color: white;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page