Hi there,
I keep getting the following error message.
None of your header elements should be empty.
I’ve rewritten my entire code from scratch twice and still keep getting the same error.
No idea what I’m doing wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header id="nav_header">JS Documentation</header>
<a href="#Introduction" class="nav-link">Introduction</a>
<a href="#Syntax" class="nav-link">Syntax</a>
<a href="#Variables" class="nav-link">Variables</a>
<a href="#Functions" class="nav-link">Functions</a>
<a href="#Objects" class="nav-link">Objects</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>JavaScript is a cross-platform, object-oriented scripting language.</p>
<p>JavaScript is a versatile, high-level programming language primarily used for web development. It enables interactive web pages by manipulating page content, styles, and behavior in response to user actions.</p>
<p>Initially created in 10 days by Brendan Eich in 1995, JavaScript has evolved into a full-featured language that now runs on both client and server sides (via Node.js). It supports multiple programming paradigms including object-oriented, functional, and imperative styles.</p>
<!-- Add more content as needed -->
</section>
<section class="main-section" id="Syntax">
<header>Syntax</header>
<p>JavaScript syntax is the set of rules for writing JavaScript programs.</p>
<p>JavaScript syntax follows C-style patterns with curly braces for code blocks and semicolons to terminate statements. It is case-sensitive and uses camelCase naming conventions by community agreement.</p>
<p>A basic script includes variables, operators, and control structures. For example: <code>let greeting = "Hello " + "World!";</code> demonstrates string concatenation. Modern JavaScript also supports arrow functions and template literals for cleaner code.</p>
<!-- Add more content as needed -->
</section>
<section class="main-section" id="Variables">
<header>Variables</header>
<p>Variables are containers for storing data values.</p>
<p>Variables in JavaScript are declared using <code>let</code>, <code>const</code>, or the legacy <code>var</code>. <code>let</code> allows block-scoped reassignable values, while <code>const</code> creates read-only constants.</p>
<p>Hoisting behavior differs between declarations: <code>var</code> variables are hoisted with undefined values, while <code>let</code> and <code>const</code> remain uninitialized until declaration. Always initialize variables before use for predictable behavior.</p>
<p>JavaScript variables are containers for storing data values. They must be declared before use:</p>
<ul>
<li><code>var</code> - Function-scoped, hoisted declaration</li>
<li><code>let</code> - Block-scoped, mutable variable</li>
<li><code>const</code> - Block-scoped, immutable constant</li>
</ul>
<p>Best practices recommend using <code>const</code> by default and <code>let</code> when rebinding is needed.</p>
<!-- Add more content as needed -->
</section>
<section class="main-section" id="Functions">
<header>Functions</header>
<p>A JavaScript function is a block of code designed to perform a particular task.</p>
<p>Functions are first-class citizens in JavaScript, meaning they can be assigned to variables, passed as arguments, and returned from other functions. They are declared using the <code>function</code> keyword or arrow syntax.</p>
<p>Modern ES6 features include default parameters and rest operators: <code>function sum(...numbers) {}</code>. Arrow functions (<code>() => {}</code>) provide concise syntax and lexical <code>this</code> binding, making them ideal for callbacks.</p>
<p>JavaScript functions can be declared in multiple ways:</p>
<ul>
<li>Function declarations: <code>function add() {}</code></li>
<li>Function expressions: <code>const add = function() {}</code></li>
<li>Arrow functions: <code>const add = () => {}</code></li>
</ul>
<p>Key differences include hoisting behavior and <code>this</code> binding rules.</p>
<!-- Add more content as needed -->
</section>
<!-- Objects Section -->
<section class="main-section" id="Objects">
<header>Objects</header>
<p>Objects are collections of key-value pairs and the fundamental building blocks of JavaScript. They can be created using object literals <code>{}</code>, constructor functions, or the <code>class</code> syntax.</p>
<p>Properties can be accessed using dot notation <code>object.property</code> or bracket notation <code>object['property']</code>. Modern features include computed property names and object destructuring for cleaner data handling.</p>
<p>Objects can be created using various methods:</p>
<ul>
<li>Object literals: <code>{ key: value }</code></li>
<li>Constructor functions: <code>new Object()</code></li>
<li>Class syntax: <code>class MyObject {}</code></li>
</ul>
<p>Modern JavaScript prefers object literals and class syntax for clearer code structure.</p>
<!-- Add more content as needed -->
</section>
</main>
</body>
</html>
/* styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #ffffff;
}
/* Navbar Styles */
#navbar {
position: fixed;
left: 0;
top: 0;
width: 300px;
height: 100vh;
background-color: #f8f9fa;
border-right: 2px solid #e0e0e0;
padding: 1.5rem;
overflow-y: auto;
}
#navbar header {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: #2c3e50;
padding: 0.5rem 0;
border-bottom: 2px solid #dee2e6;
}
.nav-link {
display: block;
padding: 0.8rem 1rem;
margin: 0.5rem 0;
text-decoration: none;
color: #34495e;
border-radius: 5px;
transition: all 0.3s ease;
background-color: #ffffff;
}
.nav-link:hover {
background-color: #e9ecef;
transform: translateX(5px);
}
/* Main Content Styles */
#main-doc {
margin-left: 320px;
padding: 2.5rem;
}
.main-section {
margin-bottom: 3rem;
padding: 1.5rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.main-section header {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #2c3e50;
padding-bottom: 0.5rem;
border-bottom: 2px solid #dee2e6;
}
.main-section p {
margin-bottom: 1.2rem;
color: #4a4a4a;
font-size: 1.1rem;
line-height: 1.8;
}
.main-section ul {
margin: 1.5rem 0;
padding-left: 2rem;
}
.main-section li {
margin-bottom: 0.8rem;
color: #4a4a4a;
line-height: 1.6;
}
code {
display: inline-block;
padding: 0.2rem 0.4rem;
background-color: #f3f3f3;
border-radius: 3px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9rem;
color: #e74c3c;
}
/* Media Query for Mobile */
@media (max-width: 768px) {
#navbar {
position: static;
width: 100%;
height: auto;
border-right: none;
border-bottom: 2px solid #dee2e6;
}
#main-doc {
margin-left: 0;
padding: 1.5rem;
}
.main-section {
padding: 1rem;
}
.nav-link {
margin: 0.3rem 0;
}
}
/* Additional Styling for Lists */
.main-section ul {
list-style-type: circle;
margin-left: 1.5rem;
}
.main-section li::marker {
color: #7f8c8d;
}
.main-section li code {
background-color: #f8f9fa;
padding: 0.2rem 0.5rem;
margin: 0 0.3rem;
}