Tell us what’s happening:
The test is flagging an error because it expects the id of each section to exactly match the text in the first <h2> header, with spaces replaced by underscores. Even though my code appears correct, the test is still flagging this mismatch. Can you help me identify what might be causing the issue?
Your code so far
<!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>
<!-- Navbar -->
<nav id="navbar">
<header>
<h1>Technical Documentation</h1>
</header>
<ul>
<li><a href="#HTML_Basics" class="nav-link">HTML Basics</a></li>
<li><a href="#CSS_Introduction" class="nav-link">CSS Introduction</a></li>
<li><a href="#JavaScript_Overview" class="nav-link">JavaScript Overview</a></li>
<li><a href="#DOM_Manipulation" class="nav-link">DOM Manipulation</a></li>
<li><a href="#APIs_and_AJAX" class="nav-link">APIs and AJAX</a></li>
</ul>
</nav>
<!-- Main Content -->
<main id="main-doc">
<!-- Section 1: HTML Basics -->
<section id="HTML_Basics" class="main-section">
<header><h2>HTML Basics</h2></header>
<p>HTML stands for Hypertext Markup Language. It is the standard markup language for creating web pages.</p>
<p>HTML describes the structure of a webpage using markup elements.</p>
<p>Each element in HTML is represented by a tag, such as <code><div></code> or <code><p></code>.</p>
<p>HTML elements can contain attributes to provide additional information, such as <code>class</code> or <code>id</code>.</p>
<p>Basic HTML document structure consists of <code><html></code>, <code><head></code>, and <code><body></code> tags.</p>
<code><!DOCTYPE html></code>
<code><html> ... </html></code>
<code><head> ... </head></code>
<code><body> ... </body></code>
<ul>
<li>HTML tags are case-insensitive.</li>
<li>Every tag has an opening and closing tag.</li>
<li>Empty tags may not require a closing tag.</li>
</ul>
</section>
<!-- Section 2: CSS Introduction -->
<section id="CSS_Introduction" class="main-section">
<header><h2>CSS Introduction</h2></header>
<p>CSS stands for Cascading Style Sheets. It controls the layout and presentation of a webpage.</p>
<p>CSS can be applied to HTML elements to change their appearance.</p>
<p>You can define styles in-line, in the <code><style></code> tag, or in an external stylesheet.</p>
<p>CSS uses selectors to target HTML elements and apply specific styles.</p>
<code>h1 { color: blue; }</code>
<code>body { font-family: Arial, sans-serif; }</code>
<code>div { padding: 10px; }</code>
<ul>
<li>CSS can change colors, fonts, spacing, and more.</li>
<li>You can use classes or IDs to target specific elements.</li>
<li>CSS supports responsive design using media queries.</li>
</ul>
</section>
<!-- Section 3: JavaScript Overview -->
<section id="JavaScript_Overview" class="main-section">
<header><h2>JavaScript Overview</h2></header>
<p>JavaScript is a programming language that enables interactive web pages.</p>
<p>JavaScript allows you to create dynamic content and respond to user interactions.</p>
<p>It can manipulate the DOM, fetch data from APIs, and more.</p>
<code>let x = 10;</code>
<code>console.log(x);</code>
<code>document.getElementById("id").innerText = "Hello!";</code>
<ul>
<li>JavaScript is event-driven and asynchronous.</li>
<li>It supports variables, loops, and functions.</li>
<li>It can interact with HTML elements through the DOM.</li>
</ul>
</section>
<!-- Section 4: DOM Manipulation -->
<section id="DOM_Manipulation" class="main-section">
<header><h2>DOM Manipulation</h2></header>
<p>The DOM (Document Object Model) is a programming interface for web documents.</p>
<p>It represents the page as a tree structure where each node is an object.</p>
<p>JavaScript can interact with the DOM to create, modify, and delete elements.</p>
<code>let element = document.getElementById("id");</code>
<code>element.innerHTML = "New Content";</code>
<code>document.createElement("div");</code>
<ul>
<li>The DOM is a tree-like structure with elements as nodes.</li>
<li>JavaScript can add, remove, and modify DOM elements dynamically.</li>
<li>Events such as <code>click</code> and <code>mouseover</code> can be captured and handled.</li>
</ul>
</section>
<!-- Section 5: APIs and AJAX -->
<section id="APIs_and_AJAX" class="main-section">
<header><h2>APIs and AJAX</h2></header>
<p>APIs (Application Programming Interfaces) allow different software to communicate with each other.</p>
<p>AJAX (Asynchronous JavaScript and XML) is used to fetch data from the server without refreshing the page.</p>
<p>AJAX allows you to send and receive data asynchronously using JavaScript.</p>
<code>let xhr = new XMLHttpRequest();</code>
<code>xhr.open("GET", "data.json", true);</code>
<code>xhr.send();</code>
<ul>
<li>AJAX requests are non-blocking and do not affect page performance.</li>
<li>APIs can provide data in formats like JSON or XML.</li>
<li>JavaScript uses AJAX to create dynamic, real-time web applications.</li>
</ul>
</section>
</main>
</body>
</html>
/* Basic Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
h1, h2, h3 {
color: #333;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 4px;
}
ul {
list-style-type: none;
padding-left: 0;
}
/* Navbar Styles */
#navbar {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100vh;
background-color: #333;
color: white;
padding: 10px;
box-sizing: border-box;
}
#navbar header h1 {
font-size: 1.5em;
margin-bottom: 20px;
}
#navbar ul {
padding: 0;
}
#navbar .nav-link {
display: block;
color: white;
padding: 10px;
text-decoration: none;
font-size: 1.2em;
}
#navbar .nav-link:hover {
background-color: #555;
}
/* Main Content */
#main-doc {
margin-left: 260px;
padding: 20px;
}
.main-section {
margin-bottom: 50px;
}
.main-section header {
margin-bottom: 20px;
}
.main-section h2 {
font-size: 1.8em;
}
.main-section p {
font-size: 1.1em;
line-height: 1.6em;
}
.main-section code {
display: block;
margin: 10px 0;
padding: 10px;
background-color: #e2e2e2;
border-radius: 5px;
}
/* Media Queries */
@media (max-width: 768px) {
#navbar {
width: 100%;
position: relative;
height: auto;
}
#main-doc {
margin-left: 0;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
