Tell us what’s happening:
Hello,
Could you please help me with this code.
The below statements show what is missing in my code but I cannot fugure it out, what is the issue.
Your #navbar should have exactly one header element within it.
The header element in the #navbar should come before any link (a) elements also in the #navbar.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation: JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<h1>JavaScript Documentation</h1> <!-- Header comes first -->
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Variables_and_Data_Types">Variables and Data Types</a>
<a class="nav-link" href="#Functions">Functions</a>
<a class="nav-link" href="#Objects">Objects</a>
<a class="nav-link" href="#DOM_Manipulation">DOM Manipulation</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>JavaScript is a versatile programming language primarily used for enhancing web pages.</p>
<p>It is an essential part of web applications and can be executed in the browser.</p>
</section>
<section class="main-section" id="Variables_and_Data_Types">
<header>Variables and Data Types</header>
<p>JavaScript has different data types including:</p>
<ul>
<li>Strings</li>
<li>Numbers</li>
<li>Booleans</li>
<li>Objects</li>
<li>Arrays</li>
</ul>
<p>To declare a variable, use the <code>let</code>, <code>const</code>, or <code>var</code> keyword:</p>
<code>let name = 'John';</code>
</section>
<section class="main-section" id="Functions">
<header>Functions</header>
<p>Functions are blocks of code designed to perform a particular task.</p>
<p>They can be defined using the <code>function</code> keyword:</p>
<code>function greet() { console.log('Hello!'); }</code>
<p>Functions can also take parameters and return values.</p>
</section>
<section class="main-section" id="Objects">
<header>Objects</header>
<p>JavaScript objects are collections of properties:</p>
<code>const person = { name: 'Jane', age: 30 };</code>
<p>Objects can also contain functions, known as methods:</p>
<code>person.greet = function() { console.log('Hi!'); };</code>
</section>
<section class="main-section" id="DOM_Manipulation">
<header>DOM Manipulation</header>
<p>The Document Object Model (DOM) represents the structure of a web page.</p>
<p>JavaScript can manipulate the DOM, enabling interactive web applications.</p>
<p>For example, to change an element's text:</p>
<code>document.getElementById('myElement').innerText = 'New Text';</code>
</section>
</main>
</body>
</html>
/* file: styles.css */
/* Basic styling for the body */
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
}
/* Styling the navbar */
#navbar {
background-color: #4CAF50;
color: white;
padding: 15px;
width: 250px;
height: 100vh;
position: fixed;
}
/* Styling the main document area */
#main-doc {
margin-left: 260px; /* Allow space for navbar */
padding: 20px;
flex: 1;
}
/* Styling sections */
.main-section {
margin-bottom: 20px;
}
header {
font-size: 1.5em;
margin-bottom: 10px;
}
/* Styling code blocks */
code {
background-color: #f4f4f4;
padding: 2px 4px;
border-radius: 4px;
}
/* Media query for smaller devices */
@media (max-width: 768px) {
#navbar {
width: 100%;
height: auto;
position: relative;
}
#main-doc {
margin-left: 0;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page