Hey Ladies and Gentelman,
I have an issue wich I cant handle alone.
The problem is that the error is.
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.
But it seems like the error is somewere else. I would be very thankfull for any help.
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Dokumentation</h1>
<main id="main-doc">
<section class="main-section" id="introduction"><header><h1>Introduction</h1></header><p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.
</p>
<p>
JavaScript contains 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 a variety of purposes by supplementing it with additional objects; for example:</p>
<ul>
<li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
<li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
</ul>
</section>
<section class="main-section" id="Hello_World"><header><h1>Hello Word</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><code></code>
<section class="main-section" id="variables"><header><h1>Variables</h1></header><p>You can declare a variable in three ways:</p><code>var x = 42.</code></section>
<section class="main-section" id="Variable_scope"><header><h1>Variable scope</h1></header><p>When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.</p><code>if (true) { var x = 5; } console.log(x); // 5</code><p>lalalal</p></section>
<section class="main-section" id="Constants"><header><h1>Constants</h1></header><p>You can create a read-only, named constant with the const keyword. The syntax of a constant identifier is the same as for a variable identifier: it must start with a letter, underscore or dollar sign and can contain alphabetic, numeric, or underscore characters.</p><p>uiuiu</p><code>const PI = 3.14;</code></section>
<section class="main-section" id="If_statement"><header><h1>If statement</h1></header><p>Use the if statement to execute a statement if a logical condition is true. Use the optional else clause to execute a statement if the condition is false. An if statement looks as follows:</p><p>uiuiu</p><code>if (condition) { statement_1; } else { statement_2; }</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><p>uiuiu</p><code></code>
<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>
</section>
<div>
<nav id="navbar">
<header>
<h1>Technical Dokumentation</h1>
</header>
<a class="nav-link" href="#introduction"><p>Introduction</p></a>
<a class="nav-link" href="#Hello_World"><p>Hello Word</p></a>
<a class="nav-link" href="#variables"><p>Variables</p></a>
<a class="nav-link" href="#Variable_scope"><p>Variable scope</p></a>
<a class="nav-link" href="#Constants"><p>Constants</p></a>
<a class="nav-link" href="#If_statement"><p>If statement</p></a>
<a class="nav-link" href="#Data_Types"><p>Data Types</p></a>
</div>
</nav>
</main>
</body>
</html>
h1{
text-align: center;
}
section p{
text-align: center;
margin: 25px 30px;
}
li{
margin: 25px 35px 25px 30px;
}
code {
background-color: #eee;
border-radius: 3px;
font-family: courier, monospace;
padding: 0 3px;
}
#navbar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: ghostwhite;
overflow-x: hidden;
padding-top: 20px;
}
#navbar::-webkit-scrollbar {
display: none;
}
#navbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#navbar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
#main-doc {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 18px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
#navbar {padding-top: 15px;}
#navbar a {font-size: 18px;}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 OPR/97.0.0.0
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
