Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I cannot pass the following tests and truly cannot see my errors. (I know the layout isn’t perfect, just trying to fix these things first)

Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.

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”).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="styles.css">
        <title>Java Documentation</title>
    </head>
    <body>
        <nav id="navbar">
            <header> Java Documentation </header>

            <a class="nav-link" href="#Introduction">Introduction</a><br>
            <a class="nav-link" href="#Hello_World">Hello World</a><br>
            <a class="nav-link" href="#Data_Types">Data Types</a><br>
            <a class="nav-link" href="#Variables">Variables</a><br>
            <a class="nav-link" href="#For_Loops">For Loops</a>

        </nav>

        <main id="main-doc">
            <!-- <div id ="secs"> -->
                <section class="main-section" id="Introduction">
                    <header>Introduction</header>
                    <p> Text Here</p>
                    <p> Text Here</p>

                    <code></code>

                </section>

                <section class="main-section" id="Hello_World">
                    <header>Hello World</header>
                    <p> Text Here</p>
                    <p> Text Here</p>

                    <code>System.out.println("Hello World");</code>

                </section>

                <section class="main-section" id="Data_Types">
                    <header>Data Types</header>
                    <p> Text Here</p>

                    <ul>
                        <li>Boolean</li>
                        <li>String</li>
                        <li>int</li>
                        <li>double</li>
                        <li>float</li>

                    </ul>
                    <p> Text Here</p>

                    <code>int x = 10</code>

                </section>

                <section class="main-section" id="Variables">
                    <header>Variables<header>
                    <p> Text Here</p>
                    <p> Text Here</p>
                    
                    <code> x = 10</code>

                </section>

                <section class="main-section" id="For_Loops">
                    <header>For Loops</header>
                    <p> Text Here</p>
                    <p> Text Here</p>

                    <code>for()</code>

                </section>
            <!-- </div>  -->

        </main>
    </body>
</html>
/* file: styles.css */
html{
    font-family: Arial, Helvetica, sans-serif; 

}

#main-doc{
    display: flex;
    flex-direction: row;
    
}

#navbar{
    background-color: rgb(238, 236, 236);
    margin-right: 15px;
    border-style: solid;
    border-width: 0 2px 0 0;

    
}


#navbar h1{
    padding: 0 10px 0 10px;
    border-style: solid;
    border-width: 0 0 1px 0;
}

.nav-link{
    font-size: large;
    text-align: left;
    border-style: solid;
    border-width: 0 0 1px 0; 
    display: flex;
    flex-direction: column;

    
} 

a{
    color: black;
    text-decoration: none;
    
}

section{
    
    display: flex;
    flex-direction: column;
    
}

code{
    background-color: rgb(238, 236, 236);

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Welcome to our community!

The closing ‘header’ tag doesn’t have a forward slash here:

<header>Variables<header>

facepalm Thank you so much! Never would have caught that. Coding in the FCC box and not VSC means I have to be more in tune with specifics like that

1 Like

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