Technical Documentation Page - Build a Technical Documentation Page

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

1 Like

could it be that it wants an header instead of an h1?

2 Likes

So it seems like the <header> element might need to be placed around the h1 tag and then inside the #navbar ? Think about it, and feel free to reach out if you need more help!