Tell us what’s happening:
Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.
Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.
You should have the same number of .nav-link and .main-section elements.
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<main id="main-doc">
<nav id="navbar">
<header><h1>JS Documentation</h1></header>
<li><a class="nav-link" href="#Introduction" </a>Introduction</li>
<li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
</li>
<li><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</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="#Variable_scope">Variable scope</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="#Reference">Reference</a>
</li>
</ul>
</nav><br>
<section class="main-section" id="Introduction">
<header><h1>Introduction</h1></header>
<p>JavaScript is a cross-platform, object-oriented scripting language.
Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:
JavaScript is a very free-form language compared to Java.</p>
</section>
<section class="main-section" id="What_you_should_already_know">
<header><h1>What you should already know</h1></header>
<p>This guide assumes you have the following basic background:</p>
<ul>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
<li>Good working knowledge of HyperText Markup Language (HTML).</li>
<li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about JavaScript.</li></ul>
</section>
<section class="main-section" id="JavaScript_and_Java">
<header><h1>JavaScript and Java</h1></header>
<p> JavaScript and Java are similar in some ways but fundamentally different in some others.</p>
</section>
<section class="main-section" id="Hello_World">
<header><h1>Hello World</h1></header>
<p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
<code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code>
</section>
<section class="main-section" id="Variables">
<header><h1>Variables</h1></header>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
</section>
<section class="main-section" id="Declaring Variables">
<header><h1>Declaring Variables</h1></header>
<p>You can declare a variable in three ways:
With the keyword var. For example,</p>
<code>var x = 42.</code>
</section>
<section class="main-section" id="Variable_scope">
<header><h1>Variable scope</h1></header>
<p>This behavior changes, when using the let declaration introduced in ECMAScript 2015.</p>
<code>if (true) { let y = 5; } console.log(y); // ReferenceError: y is
not defined</code>
</section>
<section class="main-section" id="Global_variables">
<header><h1>Global variables</h1></header>
<p>Global variables are in fact properties of the global object. In web pages the global object is window, so you can set and access global variables using the window.variable syntax.</p>
</section>
<section class="main-section" id="Constants">
<header><h1>Constants</h1></header>
<p>A constant cannot change value through assignment or be re-declared while the script is running. It has to be initialized to a value.</p>
<code>// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS
WILL CAUSE AN ERROR ALSO function f() { const g = 5; var g;
//statements }</code>
</section>
<section class="main-section" id="Data_types">
<header><h1>Data types</h1></header>
<p>The latest ECMAScript standard defines seven data types:</p>
<ul>
<li>Six data types that are primitives:</li>
<ul>
<li>Boolean. true and false.</li>
<li>Number. 42 or 3.14159.</li>
<li>String. "Howdy"</li>
</ul>
<li>and Object</li>
</ul>
</section>
<section class="main-section" id="if...else statement">
<header><h1>if...else statement</h1></header>
<p>You may also compound the statements using else if to have multiple conditions tested in sequence, as follows:</p>
<code>if (condition_1) { statement_1; } else if (condition_2) {
statement_2; } else if (condition_n) { statement_n; } else {
statement_last; }</code>
</section>
<section class="main-section" id="while_statement">
<header><h1>while statement</h1></header>
<p>A while statement executes its statements as long as a specified condition evaluates to true. A while statement looks as follows:</p>
<code>while (condition) statement</code>
</section>
<section class="main-section" id="Function_declarations>
<header><h1>Function declarations</h1></header>
<p>A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:</p>
<ul>
<li>The name of the function.</li>
<li>The JavaScript statements that define the function, enclosed in curly brackets, { }.</li>
</ul>
<code>function square(number) { return number * number; }</code>
</section>
<section class="main-section" id="Reference">
<header><h1>Reference</h1></header>
<ul>
<li>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" src="Javascript" alt="Javascript">MDN</a> </li>
</ul>
</section>
</main>
</body>
</html>
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: