Tell us what’s happening:
The first child of each .main-section should be a header element
– I have passed this test case but your tests UI is showing it as not passed. seems like a BUG. fix it !
Your code so far
<!-- file: index.html -->
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
Please post your full code. It is likely that you have errors in your code that preventing the test suite from marking your code as correct.
1 Like
Nope. I dont think code has any errors.
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</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>Technical Documentation</header>
<a href="#Introduction" class="nav-link">Introduction</a>
<a href="#Getting_Started" class="nav-link">Getting Started</a>
<a href="#Features" class="nav-link">Features</a>
<a href="#API" class="nav-link">API</a>
<a href="#Troubleshooting" class="nav-link">Troubleshooting</a>
</nav>
<main id="main-doc">
<section id="Introduction" class="main-section">
<h2>Introduction</h2>
<p>This is the introduction section.</p>
<p>It gives an overview of the documentation.</p>
<code>console.log('Hello, World!');</code>
<code>var x = 5;</code>
<ul>
<li>Introduction</li>
<li>Overview</li>
</ul>
</section>
<section id="Getting_Started" class="main-section">
<h2>Getting Started</h2>
<p>This section helps you get started.</p>
<p>Follow these steps to get up and running.</p>
<code>npm install</code>
<code>npm start</code>
<ul>
<li>Installation</li>
<li>Configuration</li>
</ul>
</section>
<section id="Features" class="main-section">
<h2>Features</h2>
<p>Explore the features of the product.</p>
<p>Learn about the capabilities it offers.</p>
<code>function add(a, b) { return a + b; }</code>
<code>const API_URL = 'https://api.example.com';</code>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
</ul>
</section>
<section id="API" class="main-section">
<h2>API</h2>
<p>Details about the API.</p>
<p>Learn how to use the API endpoints.</p>
<code>fetch('/api/v1/resource')</code>
<code>axios.get('/api/v1/resource')</code>
<ul>
<li>Endpoint 1</li>
<li>Endpoint 2</li>
</ul>
</section>
<section id="Troubleshooting" class="main-section">
<h2>Troubleshooting</h2>
<p>Find solutions to common issues.</p>
<p>Get help with troubleshooting tips.</p>
<code>console.error('Error occurred');</code>
<code>try { ... } catch (error) { ... }</code>
<ul>
<li>Issue 1</li>
<li>Issue 2</li>
</ul>
</section>
</main>
</body>
</html>
styles.css:
/* Basic reset and styling */
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
}
#navbar {
width: 250px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
background: #f4f4f4;
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
#navbar header {
font-size: 1.5em;
margin-bottom: 20px;
}
#navbar .nav-link {
display: block;
margin: 10px 0;
text-decoration: none;
color: #333;
}
#navbar .nav-link:hover {
text-decoration: underline;
}
#main-doc {
margin-left: 270px; /* Adjust based on the width of the navbar */
padding: 20px;
}
.main-section {
margin-bottom: 40px;
}
.main-section h2 {
font-size: 1.5em;
margin-bottom: 10px;
}
.main-section p {
margin-bottom: 10px;
}
.main-section code {
display: block;
background: #f4f4f4;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
.main-section ul {
list-style: disc;
margin: 10px 0;
padding-left: 20px;
}
/* Media query for responsiveness */
@media (max-width: 768px) {
#navbar {
width: 100%;
position: relative;
height: auto;
}
#main-doc {
margin-left: 0;
}
}
I dont think code has any errors.
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</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>Technical Documentation</header>
<a href="#Introduction" class="nav-link">Introduction</a>
<a href="#Getting_Started" class="nav-link">Getting Started</a>
<a href="#Features" class="nav-link">Features</a>
<a href="#API" class="nav-link">API</a>
<a href="#Troubleshooting" class="nav-link">Troubleshooting</a>
</nav>
<main id="main-doc">
<section id="Introduction" class="main-section">
<h2>Introduction</h2>
<p>This is the introduction section.</p>
<p>It gives an overview of the documentation.</p>
<code>console.log('Hello, World!');</code>
<code>var x = 5;</code>
<ul>
<li>Introduction</li>
<li>Overview</li>
</ul>
</section>
<section id="Getting_Started" class="main-section">
<h2>Getting Started</h2>
<p>This section helps you get started.</p>
<p>Follow these steps to get up and running.</p>
<code>npm install</code>
<code>npm start</code>
<ul>
<li>Installation</li>
<li>Configuration</li>
</ul>
</section>
<section id="Features" class="main-section">
<h2>Features</h2>
<p>Explore the features of the product.</p>
<p>Learn about the capabilities it offers.</p>
<code>function add(a, b) { return a + b; }</code>
<code>const API_URL = 'https://api.example.com';</code>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
</ul>
</section>
<section id="API" class="main-section">
<h2>API</h2>
<p>Details about the API.</p>
<p>Learn how to use the API endpoints.</p>
<code>fetch('/api/v1/resource')</code>
<code>axios.get('/api/v1/resource')</code>
<ul>
<li>Endpoint 1</li>
<li>Endpoint 2</li>
</ul>
</section>
<section id="Troubleshooting" class="main-section">
<h2>Troubleshooting</h2>
<p>Find solutions to common issues.</p>
<p>Get help with troubleshooting tips.</p>
<code>console.error('Error occurred');</code>
<code>try { ... } catch (error) { ... }</code>
<ul>
<li>Issue 1</li>
<li>Issue 2</li>
</ul>
</section>
</main>
</body>
</html>
styles.css:
/* Basic reset and styling */
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
}
#navbar {
width: 250px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
background: #f4f4f4;
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
#navbar header {
font-size: 1.5em;
margin-bottom: 20px;
}
#navbar .nav-link {
display: block;
margin: 10px 0;
text-decoration: none;
color: #333;
}
#navbar .nav-link:hover {
text-decoration: underline;
}
#main-doc {
margin-left: 270px; /* Adjust based on the width of the navbar */
padding: 20px;
}
.main-section {
margin-bottom: 40px;
}
.main-section h2 {
font-size: 1.5em;
margin-bottom: 10px;
}
.main-section p {
margin-bottom: 10px;
}
.main-section code {
display: block;
background: #f4f4f4;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
.main-section ul {
list-style: disc;
margin: 10px 0;
padding-left: 20px;
}
/* Media query for responsiveness */
@media (max-width: 768px) {
#navbar {
width: 100%;
position: relative;
height: auto;
}
#main-doc {
margin-left: 0;
}
}
No need to post it twice!
I don’t see header elements?
1 Like
ok so insteadof h2> tags , we need header after section?
2 Likes
Worth trying it and seeing if it helps