Tell us what’s happening:
I am getting these 2 errors:
- " None of your
headerelements should be empty." - " Each
.nav-linkshould have text that corresponds to theheadertext of its relatedsection(e.g. if you have a “Hello world” section/header, your#navbarshould have a.nav-linkwhich has the text “Hello world”)."
But I checked my code and I couldn’t find any header elements that were empty and all the nav-link elements have the same texts as the main-section headers do.
Your code so far
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Documentation</title>
</head>
<body>
<div class="sheesh">
<nav id="navbar">
<header>JS Documentation</header>
<hr />
<div class="nav-links">
<a href="#Introduction" class="nav-link">Introduction</a>
<a href="#What_you_should_already_know" class="nav-link"
>What you should already know</a
>
<a href="#Hello_world" class="nav-link">Hello world</a>
<a href="#Variables" class="nav-link">Variables</a>
<a href="#Constants" class="nav-link">Constants</a>
<a href="#if...else_statement" class="nav-link"
>if...else statement</a
>
</div>
</nav>
<main id="main-doc">
<section id="Introduction" class="main-section">
<header>Introduction</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>
<br />
<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>
<br />
<ul>
<li>
<p>
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.
</p>
<br />
</li>
<li>
<p>
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.
</p>
</li>
</ul>
</section>
<section id="What_you_should_already_know" class="main-section">
<header>What you should already know</header>
<p>This guide assumes you have the following basic background:</p>
<br />
<ul>
<li>
<p>
A general understanding of the Internet and the World Wide Web
(WWW).
</p>
</li>
<li>
<p>Good working knowledge of HyperText Markup Language (HTML).</p>
</li>
<li>
<p>
Some programming experience. If you are new to programming, try
one of the tutorials linked on the main page about JavaScript.
</p>
</li>
</ul>
</section>
<section id="Hello_world" class="main-section">
<header>Hello world</header>
<p>
To get started with writing JavaScript, open the Scratchpad and
write your first "Hello world" JavaScript code:
</p>
<p>
<code
>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code
>
</p>
<br />
<p>
Select the code in the pad and hit Ctrl+R to watch it unfold in your
browser!
</p>
</section>
<section id="Variables" class="main-section">
<header>Variables</header>
<p>
You use variables as symbolic names for values in your application.
The names of variables, called identifiers, conform to certain
rules.
</p>
<br />
<p>
A JavaScript identifier must start with a letter, underscore (_), or
dollar sign ($); subsequent characters can also be digits (0-9).
Because JavaScript is case sensitive, letters include the characters
"A" through "Z" (uppercase) and the characters "a" through "z"
(lowercase).
</p>
<br />
<p>
You can use ISO 8859-1 or Unicode letters such as å and ü in
identifiers. You can also use the Unicode escape sequences as
characters in identifiers. Some examples of legal names are
Number_hits, temp99, and _name.
</p>
</section>
<section id="Constants" class="main-section">
<header>Constants</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>
<br />
<p><code>const PI = 3.14;</code></p>
<br />
<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>
<p>
The scope rules for constants are the same as those for let block
scope variables. If the const keyword is omitted, the identifier is
assumed to represent a variable.
</p>
<br />
<p>
You cannot declare a constant with the same name as a function or
variable in the same scope. For example:
</p>
<br />
<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
>
</p>
<br />
<p>
However, object attributes are not protected, so the following
statement is executed without problems.
</p>
<br />
<p>
<code
>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key =
"otherValue";</code
>
</p>
<br />
</section>
<section id="if...else_statement" class="main-section">
<header>if...else statement</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>
<br />
<p>
<code>if (condition) { statement_1; } else { statement_2; }</code>
</p>
<br />
<p>
condition can be any expression that evaluates to true or false. See
Boolean for an explanation of what evaluates to true and false. If
condition evaluates to true, statement_1 is executed; otherwise,
statement_2 is executed. statement_1 and statement_2 can be any
statement, including further nested if statements.
</p>
<br />
<p>
You may also compound the statements using else if to have multiple
conditions tested in sequence, as follows:
</p>
<br />
<p>
<code
>if (condition_1) { statement_1; } else if (condition_2) {
statement_2; } else if (condition_n) { statement_n; } else {
statement_last; }</code
>
</p>
<br />
<p>
In the case of multiple conditions only the first logical condition
which evaluates to true will be executed. To execute multiple
statements, group them within a block statement ({ ... }) . In
general, it's good practice to always use block statements,
especially when nesting if statements:
</p>
<br />
<p>
<code
>if (condition) { statement_1_runs_if_condition_is_true;
statement_2_runs_if_condition_is_true; } else {
statement_3_runs_if_condition_is_false;
statement_4_runs_if_condition_is_false; }</code
>
</p>
<br />
<p>
It is advisable to not use simple assignments in a conditional
expression, because the assignment can be confused with equality
when glancing over the code. For example, do not use the following
code:
</p>
<br />
<p><code>if (x = y) { /* statements here */ }</code></p>
<br />
<p>
If you need to use an assignment in a conditional expression, a
common practice is to put additional parentheses around the
assignment. For example:
</p>
<br />
<p><code>if ((x = y)) { /* statements here */ }</code></p>
<br />
</section>
</main>
</div>
</body>
</html>
styles.css
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background: #1b1b1b;
}
main header {
font-size: 35px;
font-weight: bold;
margin: 20px 0;
color: #ffffff;
margin-left: 20px;
}
main {
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
}
nav header {
color: #fff;
font-size: 30px;
font-weight: 800;
padding: 20px 0;
}
nav a {
text-decoration: none;
color: #f8f4f8;
font-size: 18px;
padding: 10px;
border-radius: 10px;
transition: all 0.15s ease;
}
span {
color: #f0db4f;
}
nav a:hover {
background-color: #3b3b3b;
}
nav {
height: 100vh;
background-color: #2b2b2b;
width: fit-content;
padding: 10px;
}
.sheesh {
display: inline-grid;
grid-template-columns: 1fr 5fr;
}
.nav-links {
display: flex;
flex-direction: column;
}
p {
color: #f8f4f8;
margin-left: 25px;
}
ul p {
margin-left: 0;
}
ul {
margin-left: 25px;
color: #f8f4f8;
}
code {
background-color: #343434;
padding: 15px;
word-break: normal;
word-wrap: normal;
display: block;
margin-top: 10px;
width: fit-content;
border-radius: 5px;
margin-left: 10px;
white-space: pre-line;
line-height: 1.5;
font-family: cascadia mono;
font-size: 14px;
}
hr {
margin-bottom: 20px;
opacity: 0.5;
}
@media only screen and (max-width: 800px) {
nav {
opacity: 0;
transform: scale(0);
width: 0;
height: 0;
visibility: hidden;
transition: all 0.1s ease;
}
.sheesh {
display: block;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: