Tell us what’s happening:
I am having problems with these requirements: 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”).
You should have at least five code elements that are descendants of .main-section elements.
Your code so far
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>JS Documentation</header>
<a class="nav-link" href="#introduction">Introduction</a>
<a class="nav-link" href="#what_you_should_know">What you should already know</a>
<a class="nav-link" href="#javascript_and_java">JavaScript and Java</a>
<a class="nav-link" href="#hello_world">Hello world</a>
<a class="nav-link" href="#variables">Variables</a>
<a class="nav-link" href="#declaring_variables">Declaring variables</a>
<a class="nav-link" href="#variable_scope">Variable scope</a>
<a class="nav-link" href="#global_variables">Global variables</a>
<a class="nav-link" href="#constants">Constants</a>
<a class="nav-link" href="#data_types">Data types</a>
<a class="nav-link" href="#if_else_statement">if...else statement</a>
<a class="nav-link" href="#while_statement">while statement</a>
<a class="nav-link" href="#function_declarations">Function declarations</a>
<a class="nav-link" href="#reference">Reference</a>
</nav>
<main id="main-doc">
<section class="main-section" id="introduction">
<header>introduction</header>
<p>JavaScript is a cross-platform, object-oriented scripting language...</p>
<li>/<li>
<!-- Introduction content -->
</section>
<section class="main-section" id="what_you_should_know">
<header>what_you_should_know</header>
<p>This guide assumes you have the following basic background:</p>
<li>/<li>
<!-- What you should already know content -->
</section>
<section class="main-section" id="javascript_and_java">
<header>javascript_and_java</header>
<p>JavaScript and Java are similar in some ways but fundamentally different in some others...</p>
<li>/<li>
<!-- JavaScript and Java content -->
</section>
<section class="main-section" id="hello_world">
<header>hello_world</header>
<p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
<li>/<li>
<!-- Hello world content -->
</section>
<section class="main-section" id="variables">
<header>variables</header>
<p>You use variables as symbolic names for values in your application...</p>
<li>/<li>
<!-- Variables content -->
</section>
<section class="main-section" id="declaring_variables">
<header>declaring_variables</header>
<p>You can declare a variable in three ways:</p>
<li>/<li>
<!-- Declaring variables content -->
</section>
<section class="main-section" id="variable_scope">
<header>variable_scope</header>
<p>When you declare a variable outside of any function, it is called a global variable...</p>
<!-- Variable scope content -->
</section>
<section class="main-section" id="global_variables">
<header>global_variables</header>
<p>Global variables are in fact properties of the global object...</p>
<!-- Global variables content -->
</section>
<section class="main-section" id="constants">
<header>constants</header>
<p>You can create a read-only, named constant with the const keyword...</p>
<!-- Constants content -->
</section>
<section class="main-section" id="data_types">
<header>data_types</header>
<p>The latest ECMAScript standard defines seven data types...</p>
<!-- Data types content -->
</section>
<section class="main-section" id="if_else_statement">
<header>if_else_statement</header>
<p>Use the if statement to execute a statement if a logical condition is true...</p>
<!-- if...else statement content -->
</section>
<section class="main-section" id="while_statement">
<header>while_statement</header>
<p>A while statement executes its statements as long as a specified condition evaluates to true...</p>
<!-- while statement content -->
</section>
<section class="main-section" id="function_declarations">
<header>function_declarations</header>
<p>A function definition (also called a function declaration, or function statement) consists of the function keyword...</p>
<!-- Function declarations content -->
</section>
<section class="main-section" id="reference">
<header>reference</header>
<p>All the documentation in this page is taken from MDN.</p>
<!-- Reference content -->
</section>
</main>
<script src="script.js"></script>
</body>
</html>
CSS
#navbar {
position: fixed;
left: 0;
width: 200px;
background-color: #f2f2f2;
padding: 20px;
}
@media (max-width: 767px)
#navbar header {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
#navbar .nav-link {
display: block;
margin-bottom: 10px;
color: #333;
text-decoration: none;
}
/* Main content styles */
#main-doc {
margin-left: 220px;
padding: 20px;
}
.main-section {
margin-bottom: 40px;
}
.main-section header {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.main-section p {
margin-bottom: 10px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 OPR/101.0.0.0 (Edition std-1)
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
