**I was running the tests for the RWD technical documentation project but even though i’ve done everything according to the instructions and checked my code multiple times i get the same error when i run the tests:
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 .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”).
I am very sure that my code is correct so please check if there is some bug from freecodecamp.
**
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<title>Technical Documentation</title>
<link rel="stylesheet" href="./styles.css">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hind:wght@300&display=swap" rel="stylesheet">
</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_you_need">What you need</a></li>
<li><a class="nav-link" href="#Getting_started">Getting started</a></li>
<li><a class="nav-link" href="#Variables">Variables</a></li>
<li><a class="nav-link" href="#Declaration_of_variables">Declaration of variables</a></li>
<li><a class="nav-link" href="#Data_types">Data types</a></li>
<li><a class="nav-link" href="#Comments">Comments</a></li>
<li><a class="nav-link" href="#Function">Function</a></li>
<li><a class="nav-link" href="#Reference">Reference</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<p>JavaScript is a cross-platform, object-oriented scripting language. It's a small and easy language. Within a host environment (such as a web browser), it can be
associated with objects within that environment to provide programmatic control.</p>
<p>It is a programming language that adds interactivity to websites.
This happens in games with responsive behavior when you press a button or enter data
in a form. dynamic styling.</p>
<p>JavaScript includes a standard library of objects such as Array, Date, and Math, and a
core set of language elements such as operators, control structures, and statements.
Core JavaScript can be extended for various purposes by adding objects. For example:</p>
<ul>
<li>
Client-side JavaScript extends the core language by providing the objects that drive
the browser and its DOM. For example, client-side extensions allow applications to
place elements in HTML forms and respond to user events such as mouse clicks, form
submissions, and page navigation.</li>
<li>Server-side JavaScript extends the core language by providing objects related to
JavaScript running on the server. For example, server-side extensions allow a
application to conduct with a database, provide continuity of data from one
call to another, or perform file operations on on a server</li>
</ul>
</article>
</section>
<section class="main-section" id="What_you_need">
<header>What you need</header>
<article>
<p>What you need for learning javascript according to this guide:</p>
<ul>
<li>a code editor(VS code)</li>
<li>general understanding of the internet</li>
<li>Programming practice (HTML, basic CSS)</li>
</ul>
</article>
</section>
<section class="main-section" id="Getting_started">
<header>Getting started</header>
<article>
<p>In this guide you will understand how to get started in javascript by writing some code.</p>
<ol>
<li>Create a local js file in your folder which already contains the html file which you
will be working on.The file can be named "main.js"</li>
<li>Open your html file create a <script></script> element within the body and add a
src attribute
For eg:</li>
<code>
<script src="scripts/main.js"></script>
</code>
<li>Open your js file.</li>
<li>Enter the following code:
<br>
<code>
const myHeading = document.querySelector("h1");
<br>
myHeading.textContent = "Hello world!";
</code>
</li>
<li>save both the html and javascript files.</li>
<li>Load index.html in your browser and you will get the result. Play with the code for
some time and see what happens
</li>
</ol>
</article>
</section>
<section class="main-section" id="Variables">
<header>Variables</header>
<article>
<p>variables are symbolic names that serve as a storage place for different values based
on their variable type.Diffrent types of variables are:</p>
<ul>
<li>String (stores text and is generally declared in single quote marks)</li>
<li>Number (stores numbers eg 98, 6077)</li>
<li>Boolean (stores true or false)</li>
<li>Array (allows you to store multiple values)</li>
<li>Object (can store anything)</li>
</ul>
</article>
</section>
<section class="main-section" id="Declaration_of_variables">
<header>Declaration of variables:</header>
<article>
<p>Variables can be declared in three ways:</p>
<p>With the keyword var for eg:</p>
<code>var a = 22;</code>
<p>This syntax can be used to declare both local and global variables.</p>
<p>With the keyword let. For example,</p>
<code>let b = 7;</code>
<p>This syntax can be used to declare a block scope local variable.</p>
<p>By simply assigning it a value. For example,</p>
<code>c = 62;</code>
<p>This always declares a global variable. It generates a strict JavaScript warning. You shouldn't
use this variant.</p>
</article>
</section>
<section class="main-section" id="Data_types">
<header>Data types</header>
<article>
<p>The latest ECMAScript standard defines seven data types.</p>
<ul>
<li>
<p>Six data types that are primitives:</p>
<ul>
<li>Boolean. true and false.</li>
<li>
null. A special keyword denoting a null value. Because
JavaScript is case-sensitive, null is not the same as Null,
NULL, or any other variant.
</li>
<li>
undefined. A top-level property whose value is undefined.
</li>
<li>Number. 42 or 3.14159.</li>
<li>String. "Howdy"</li>
<li>
Symbol (new in ECMAScript 2015). A data type whose instances
are unique and immutable.
</li>
</ul>
</li>
<li>and Object</li>
</ul>
<p>These data types are relatively small, but they can perform useful functions in your application.
Objects and functions are the other basic building blocks of the language. You can think of
objects as named containers of values, and functions as procedures that your application
can execute.</p>
</article>
</section>
<section class="main-section" id="Comments">
<header>Comments</header>
<article>
<p>Comments are pieces of text that can be added with code. Comments are mostly added to make it
easier for someone else to understand the code. The browser ignores text marked as a comment.
Comments in javascript are similar to those in html and css but with different syntax:
</p>
<code>
/*
This a multiline comment
The browser doesn't include anything in between this.
A comment is used to understand the code better.
*/
<br>
<br>
// This is a single-line comment
</code>
</article>
</section>
<section class="main-section" id="Function">
<header>Function</header>
<article>
<p>A function is a piece of code that can be called by other code either by itself or by a
variable that references the function. When a function is called, arguments are passed to the
function as input, and the function can optionally return a value. A function in JavaScript is
also an object. It is mainly used to divide a complex task into smaller parts.
</p>
<p>A function is written to log 'Good morning' to the console:</p>
<code>
function greeting() {<br>
console.log('Good morning');<br>
};
<br>
greeting(); /*greeting is called here. without invoking the function there will be no execution*/
</code>
</article>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<article>
<p>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/" target="_blank">MDN</a> and <a href="https://www.freecodecamp.org/" target="_blank">freecodecamp</a>.</p>
</article>
</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/100.0.4896.127 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Technical Documentation Page
Link to the challenge:
