Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I’m almost done with the challenge, but can’t figure out how to solve those two tests in order to complete it.

  1. Your #navbar should have exactly one header element within it.
  2. Your Technical Documentation project should use at least one media query.
    Problem being, I have a header element in my navbar, and a working media query in the css
    Your code so far
    HTML (only the relevant part):
<body>
    <nav id="navbar">
        <header>JS Documentation</header>
        <ul>
            <li><a href="#The_Language" class="nav-link">The Language</a></li>
            <li><a href="#Output" class="nav-link">Output</a></li>
            <li><a href="#Variables" class="nav-link">Variables</a></li>
            <li> <a href="#Conditional_Statements" class="nav-link">Conditional Statements</a></li>
            <li><a href="#Loops" class="nav-link">Loops</a></li>
        </ul>
    </nav>

CSS:

@media  screen and (max-width: 1280px) {
    body {
        display: flex;
        flex-direction: column;
    }
    nav {
        position: sticky;
        top: 0;
        text-align: center;
        width: 100vw;
        height: 22vh;
        display: block;
    }
    nav>ul>li {
        display: inline;
        margin: 0 2rem 0 2rem;
        
    }
    main {
        display: block;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Always include ALL of your code, not just the parts you think are relevant. For example, your navbar code looks fine, so I’m guessing there is something else that is causing the issue but I can’t test it because you didn’t include all of your HTML.

Thank uou, then I’m going to add the whole HTML down below.

<!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>JS Documentation</title>
</head>
<body>
    <nav id="navbar">
        <header>JS Documentation</header>
        <ul>
            <li><a href="#The_Language" class="nav-link">The Language</a></li>
            <li><a href="#Output" class="nav-link">Output</a></li>
            <li><a href="#Variables" class="nav-link">Variables</a></li>
            <li> <a href="#Conditional_Statements" class="nav-link">Conditional Statements</a></li>
            <li><a href="#Loops" class="nav-link">Loops</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="The_Language">
            <header><h2>The Language</h2></header>
            <p>The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript. </p>
            <p>Following, we have an exqample of JavaScript code snippet:</p>
            <div class="codediv">
                <code>
                    function myFunc(x, y) { <br/>
                        let sum; <br/>
                        sum = x + y; <br/>
                        return sum; <br/>
                    }
                </code>
            </div>
            
        </section>
        <section class="main-section" id="Output">
            <header><h2>Output</h2></header>
            <p>In JavaScript, we have 3 ways to show the user datas: in the console, by writing in the document or by writing in an HTML element. Following, we have the ways to write the line SOME WORDS in all the 3 ways:</p>
            <div class="codediv">
                <code>
                    <ul>
                        <li>console.log("SOME WORDS");</li>
                        <li>document.write("SOME WORDS");</li>
                        <li>document.getElementById('THE ELEMENT ID').innerHTML = "SOME WORDS";</li>
                    </ul>
                </code>
            </div>
            <p>Note, we have multiple ways to reach a specific element in JS, the getElementById way to do that takes in account the element with the said ID.</p>
        </section>
        <section class="main-section" id="Variables">
            <header><h2>Variables</h2></header>
            <p>Variables in JS aren't like what someone who's used to other languages like C++ might think: as a loosely typed language, JS allows for any type of data to be inputted in a variable.</p>
            <p>The only "types" of variables we have are:</p>
            <div class="codediv">
                <code>
                    <ul>
                        <li>let</li>
                        <li>const</li>
                        <li>var</li>
                    </ul>
                </code>
            </div>
            <p>With let, we can declare a variable that can be accessed from the same scope or from a smaller one. Const works the same, but as the name implies store a constant value. Var is used to declare global variables, but it's pretty much obsolete</p>
        </section>
        <section class="main-section" id="Conditional_Statements">
            <header><h2>Conditional Statements</h2></header>
            <p>Conditional statements are omnipresent in coding and allows the programmer to make for a more useful code. in JS we can use them like we would expect:</p>
            <div class="codediv">
                <code>if (condition) { <br/>
                    //some code <br/>
                } else if (other condition) {<br/>
                    //more code <br/>
                } else {<br/>
                    //other code<br/>
                }</code>
            </div>
            <p>With conditional statements, we can add depth to the code in the way that, when the condition inside the parenthesis is fullfilled, a certain code is executed. The "else" part is executed only when the other's can't be.</p>
        </section>
        <section class="main-section" id="Loops">
            <header><h2>Loops</h2></header>
            <p>Loops are a powerful construct that we need to learn: they allow the code inside the brackets to be executed multiple times based around what we put inside the parenthesis. In JS we have a lot of loops, but the most importants are:</p>
            <div class="codediv">
                <code>for (let i = 0; i < n; i++) {<br/>
                      //some code <br/>
                    }<br/>
                    while (condition) {<br/>
                        //some code<br/>
                    }</code>
            </div>
            <p>By using the "for" loop, we repeat the code inside the brackets until the value of "i" (or the index) exceed that of "n", we can use all the mathematical operators. The "i++" is what happens at the end of the code, before it runs again.<br/>
            The "while" loop repeats, instead, the code until the condition in the parenthesis is met. Meaning it could run for an indefinite amount of time.
            </p>
        </section>
    </main>
</body>
</html><!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>JS Documentation</title>
</head>
<body>
    <nav id="navbar">
        <header><h1>JS Documentation</h1></header>
        <ul>
            <li><a href="#The_Language" class="nav-link">The Language</a></li>
            <li><a href="#Output" class="nav-link">Output</a></li>
            <li><a href="#Variables" class="nav-link">Variables</a></li>
            <li> <a href="#Conditional_Statements" class="nav-link">Conditional Statements</a></li>
            <li><a href="#Loops" class="nav-link">Loops</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="The_Language">
            <header><h2>The Language</h2></header>
            <p>The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript. </p>
            <p>Following, we have an exqample of JavaScript code snippet:</p>
            <div class="codediv">
                <code>
                    function myFunc(x, y) { <br/>
                        let sum; <br/>
                        sum = x + y; <br/>
                        return sum; <br/>
                    }
                </code>
            </div>
            
        </section>
        <section class="main-section" id="Output">
            <header><h2>Output</h2></header>
            <p>In JavaScript, we have 3 ways to show the user datas: in the console, by writing in the document or by writing in an HTML element. Following, we have the ways to write the line SOME WORDS in all the 3 ways:</p>
            <div class="codediv">
                <code>
                    <ul>
                        <li>console.log("SOME WORDS");</li>
                        <li>document.write("SOME WORDS");</li>
                        <li>document.getElementById('THE ELEMENT ID').innerHTML = "SOME WORDS";</li>
                    </ul>
                </code>
            </div>
            <p>Note, we have multiple ways to reach a specific element in JS, the getElementById way to do that takes in account the element with the said ID.</p>
        </section>
        <section class="main-section" id="Variables">
            <header><h2>Variables</h2></header>
            <p>Variables in JS aren't like what someone who's used to other languages like C++ might think: as a loosely typed language, JS allows for any type of data to be inputted in a variable.</p>
            <p>The only "types" of variables we have are:</p>
            <div class="codediv">
                <code>
                    <ul>
                        <li>let</li>
                        <li>const</li>
                        <li>var</li>
                    </ul>
                </code>
            </div>
            <p>With let, we can declare a variable that can be accessed from the same scope or from a smaller one. Const works the same, but as the name implies store a constant value. Var is used to declare global variables, but it's pretty much obsolete</p>
        </section>
        <section class="main-section" id="Conditional_Statements">
            <header><h2>Conditional Statements</h2></header>
            <p>Conditional statements are omnipresent in coding and allows the programmer to make for a more useful code. in JS we can use them like we would expect:</p>
            <div class="codediv">
                <code>if (condition) { <br/>
                    //some code <br/>
                } else if (other condition) {<br/>
                    //more code <br/>
                } else {<br/>
                    //other code<br/>
                }</code>
            </div>
            <p>With conditional statements, we can add depth to the code in the way that, when the condition inside the parenthesis is fullfilled, a certain code is executed. The "else" part is executed only when the other's can't be.</p>
        </section>
        <section class="main-section" id="Loops">
            <header><h2>Loops</h2></header>
            <p>Loops are a powerful construct that we need to learn: they allow the code inside the brackets to be executed multiple times based around what we put inside the parenthesis. In JS we have a lot of loops, but the most importants are:</p>
            <div class="codediv">
                <code>for (let i = 0; i < n; i++) {<br/>
                      //some code <br/>
                    }<br/>
                    while (condition) {<br/>
                        //some code<br/>
                    }</code>
            </div>
            <p>By using the "for" loop, we repeat the code inside the brackets until the value of "i" (or the index) exceed that of "n", we can use all the mathematical operators. The "i++" is what happens at the end of the code, before it runs again.<br/>
            The "while" loop repeats, instead, the code until the condition in the parenthesis is met. Meaning it could run for an indefinite amount of time.
            </p>
        </section>
    </main>
</body>
</html>

I’m seeing two copies of your HTML above. If I get rid of the second copy it passes for me.

The second copy starts here:

</body>
</html><!DOCTYPE html>
<html lang="en">

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