Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

I have 2 error that can’t solve

  1. I’m keep getting this error about " Failed:None of your header elements should be empty." but I checked all and I don’t see any that is empty, Chat GPT couldn’t even find so I have no clue how to solve this.
  2. Another error is " Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”)." I also can’t find the problem.
    I will really appriciate if you could tell me what should I do.

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">
    <link rel="stylesheet" href="styles.css">
    <title>Technical Document</title>
    <!--
        2errors
    -->
</head>
<body>
    <nav id="navbar">
        <header>PythonvsJavascript</header>
        <ul>
            <li><a href="#Language_Fundamentals" class="nav-link">Language Fundamentals</a></li>
            <li><a href="#Memory_Management" class="nav-link">Memory Management</a></li>
            <li><a href="#Concurrency_and_Asynchronous_Programming" class="nav-link">Concurrency and Asynchronous Programming</a></li>
            <li><a href="#Libraries_and_Frameworks" class="nav-link">Libraries and Frameworks</a></li>
            <li><a href="#Use_Cases_and_Ecosystem" class="nav-link">Use Cases and Ecosystem</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Language_Fundamentals">
            <header>Language Fundamentals</header>
            <article>
                <h2>Python Overview</h2>
                <p>Python, with its clear and concise syntax, provides a range of fundamental data types.</p>
                <h3>Python Examples</h3>
                <ul>
                    <li>Boolean: Python uses True and False for boolean values.
                        <code># Boolean: Python uses True and False for boolean values.<br>
                        is_python_fun = True<br>
                        is_learning = False</code>
                    </li>
                    <li>None: Equivalent to null in other languages, denoting the absence of a value.
                        <code>
                            # None: Equivalent to null in other languages, denoting the absence of a value.<br>
                            my_variable = None
                        </code>
                    </li>
                    <li>Integer: Represented by numbers like 42 or 0.
                        <code>
                            # Integer: Represented by numbers like 42 or 0.<br>
                            answer_to_everything = 42<br>
                            zero_value = 0
                        </code>
                    </li>
                </ul>
                <h2>JavaScript Overview</h2>
                <p>JavaScript's flexible syntax accommodates various data types essential for web development.</p>
                <h3>JavaScript Examples</h3>
                <ul>
                    <li>Boolean: JavaScript uses true and false for boolean values.
                        <code>
                            // Boolean: JavaScript uses true and false for boolean values.<br>
                            let isJavaScriptFun = true;<br>
                            let isLearning = false;
                        </code>
                    </li>
                    <li>null: A special keyword denoting a null value.
                        <code>
                            // null: A special keyword denoting a null value.<br>
                            let myVariable = null;
                        </code>
                    </li>
                    <li>undefined: A top-level property whose value is undefined.
                        <code>
                        // Number: Represented by numbers like 42 or 0.<br>
                        let answerToEverything = 42;<br>
                        let zeroValue = 0;<br>
                        </code> 
                    </li>
                </ul>
                <p>In summary, both languages share fundamental data types like boolean, but Python uses None for null, while JavaScript uses null.</p>
            </article>
        </section>
        <section class="main-section" id="Memory_Management">
            <header>Memory Management</header>
            <article>
                <h2>Python Memory Management</h2>
                <p>Automatic memory management in Python ensures efficient resource utilization.</p>
                <h3>Python Memory Examples</h3>
                <ul>
                    <li>Boolean: Memory is allocated for boolean values such as True or False.</li>
                    <li>NoneType: Memory handling for the None type, representing null.</li>
                    <li>Integer: Memory management for numeric types like integers.</li>
                </ul>
                <h2>JavaScript Memory Management</h2>
                <p>JavaScript's garbage collector handles memory allocation and deallocation.</p>
                <h3>JavaScript Memory Examples</h3>
                <ul>
                    <li>Boolean: Memory allocation for boolean values like true and false.</li>
                    <li>null: Memory management for the null value.</li>
                    <li>undefined: Memory considerations for variables with an undefined value.</li>
                </ul>
                <p>Both Python and JavaScript exhibit memory management for boolean values, null, and other data types, ensuring efficient use of resources.</p>
            </article>
        </section>
        <section class="main-section" id="Concurrency_and_Asynchronous_Programming">
            <header>Concurrency and Asynchronous Programming</header>
            <article>
                <h2>Python Concurrency</h2>
                <p>Concurrency in Python involves handling multiple tasks simultaneously.</p>
                <h3>Python Concurrency Examples</h3>
                <ul>
                    <li>Boolean: Concurrent processing of boolean values in a multi-threaded environment.</li>
                    <li>Async/Await: Asynchronous programming with boolean conditions.</li>
                    <li>NoneType: Concurrency considerations for None in asynchronous tasks.</li>
                </ul>
                <h2>JavaScript Concurrency</h2>
                <p>JavaScript excels in asynchronous operations, crucial for web development.</p>
                <h3>JavaScript Concurrency Examples</h3>
                <ul>
                    <li>Boolean: Managing boolean values in an event-driven, single-threaded environment.</li>
                    <li>Promises: Asynchronous handling of boolean conditions using promises.</li>
                    <li>null: Asynchronous operations with null values.</li>
                </ul>
                <p>Both languages demonstrate concurrency handling for boolean values and other types, showcasing their versatility in different programming paradigms.</p>
            </article>
        </section>
        <section class="main-section" id="Libraries_and_Frameworks">
            <header>Libraries and Frameworks</header>
            <article>
                <h2>Python Libraries and Frameworks</h2>
                <p>Python's rich ecosystem includes libraries and frameworks for diverse applications.</p>
                <h3>Python Examples</h3>
                <ul>
                    <li>Boolean: Utilizing boolean values in control structures within frameworks like Django.</li>
                    <li>NumPy: Numeric computing library for efficient handling of numerical data.</li>
                    <li>Pandas: Data manipulation library facilitating data analysis with boolean filtering.</li>
                </ul>
                <h2>JavaScript Libraries and Frameworks</h2>
                <p>JavaScript's dominance on the web is evident in its robust library and framework ecosystem.</p>
                <h3>JavaScript Examples</h3>
                <ul>
                    <li>Boolean: Incorporating boolean conditions in front-end frameworks like React.</li>
                    <li>Node.js: Server-side JavaScript for building scalable and performant applications.</li>
                    <li>Vue.js: JavaScript framework utilizing boolean values in data binding.</li>
                </ul>
                <p>Both Python and JavaScript leverage boolean values and other data types within their respective libraries and frameworks, enhancing developer productivity.</p>
            </article>
        </section>
        <section class="main-section" id="Use_Cases_and_Ecosystem">
            <header>Use Cases and Ecosystem</header>
            <article>
                <h2>Python Use Cases</h2>
                <p>Python's versatility extends to various domains, driven by its strong ecosystem.</p>
                <h3>Python Examples</h3>
                <ul>
                    <li>Boolean: Implementing boolean logic in web development projects.</li>
                    <li>Machine Learning: Using boolean conditions in decision-making algorithms.</li>
                    <li>Automation: Boolean values guide control flow in automation scripts.</li>
                </ul>
                <h2>JavaScript Use Cases</h2>
                <p>JavaScript's primary domain is web development, with a thriving ecosystem.</p>
                <h3>JavaScript Examples</h3>
                <ul>
                    <li>Boolean: Driving user interactions through boolean conditions in web applications.</li>
                    <li>Node.js Servers: Boolean checks for efficient server-side logic.</li>
                    <li>Interactive UIs: Utilizing boolean values in responsive user interfaces.</li>
                </ul>
                <p>Both languages demonstrate the ubiquitous use of boolean values in real-world applications, showcasing their applicability across diverse domains.</p>
            </article>
        </section>
    </main>
</body>
</html>

Hmm. I just copy/pasted your HTML above into the challenge and I am not getting either of those errors. The only test that is failing for me is the last one about using at least one media query which I’m assuming you are doing but I can’t verify since you didn’t give us your CSS.

1 Like

Thank you for your reply i tried only with my HTML it passed but when i add my html it made those two error. this is so strange. I will put my CSS here`/For All/
body{
display: flex;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
font-family: serif;
font-size: xx-large;
color: blue;
}
/Navbar/
#navbar header{
padding: 10px;
}
#navbar{
height: 100vh;
width: 300px;
position: fixed;
border-right: 1px solid black;
}
#navbar ul{
padding: 0;

}
#navbar ul a{
font-family: serif;
display: block;
padding: 20px 0;
padding-left: 10px;
height: 25px;
font-size: 18px;
border-top: 1px solid black;
text-decoration: none;
color: rgb(30, 22, 22);
}
#navbar ul a:visited{
color: black;
}
#navbar ul a:hover{
background-color: rgb(227, 223, 223);
}
#navbar ul li:last-child:after{
content: “”;
display: block;
margin-left: -10px;
height: 25px;
padding: 20px 0;
gap: 20px;
border-top: 1px solid black;
}
/Main/

main{
margin-left: 320px;
}

main section{
border-top: 1px solid;
padding: 20px;
}
main section:first-child{
border: unset;
}
code{
display: block;
background-color: antiquewhite;
width: fit-content;
border-radius: 10px;
padding: 10px;
}
/Media query/

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
#navbar{
visibility: hidden;
position: absolute;
}
main{
margin-left: unset;
}
}`

I have no idea why this happend but in order to pass, I need to delete my code for media query. If I keep my media query empty it works. is this my problem ? or just a error in the system? `@media only screen and (max-width: 600px) {

}`

What does the following code in your media query do?

#navbar{
  visibility: hidden;
  position: absolute;
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.