Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Hie so I’ve finished building my technical document page and it’s telling me that 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.

Here is my code so far


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NordVPN Technical Documentation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="navbar">
        <header>NordVPN Technical Documentation</header>
        <a class="nav-link" href="#Introduction_to_VPN">Introduction to VPN</a>
        <a class="nav-link" href="#What_is_NordVPN">What is NordVPN?</a>
        <a class="nav-link" href="#Benefits_of_using_NordVPN">Benefits of using NordVPN</a>
        <a class="nav-link" href="#Getting_Started_with_NordVPN">Getting Started with NordVPN</a>
        <a class="nav-link" href="#Troubleshooting">Troubleshooting</a>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Introduction_to_VPN">
            <header>Introduction to VPN</header>
            <p>A Virtual Private Network (VPN) is a secure and private way to browse the internet.</p>
            <code>VPN creates a secure "tunnel" between your device and the internet</code>
            <ul>
                <li>Encrypts your data</li>
                <li>Hides your IP address</li>
            </ul>
        </section>
        <section class="main-section" id="What_is_NordVPN">
            <header>What is NordVPN?</header>
            <p>NordVPN is a VPN service that provides a secure and private connection to the internet.</p>
            <code>NordVPN uses advanced encryption methods and follows a strict no-logs policy</code>
            <ul>
                <li>Encrypts your internet traffic</li>
                <li>Hides your IP address</li>
                <li>Choose from over 5,000 servers in 60 countries</li>
            </ul>
        </section>
        <section class="main-section" id="Benefits_of_using_NordVPN">
            <header>Benefits of using NordVPN</header>
            <p>Using NordVPN provides numerous benefits, including enhanced online security and privacy.</p>
            <code>NordVPN protects your data from hackers and cyber threats</code>
            <ul>
                <li>Access geo-restricted content</li>
                <li>Enjoy online anonymity</li>
            </ul>
        </section>
        <section class="main-section" id="Getting_Started_with_NordVPN">
            <header>Getting Started with NordVPN</header>
            <p>Now that you know the benefits of using NordVPN, let's get started with installing and using the app!</p>
            <code>Install NordVPN on your device</code>
            <ul>
                <li>Launch the NordVPN app</li>
                <li>Tap the "Sign Up" button</li>
                <li>Follow the on-screen instructions to create an account</li>
            </ul>
        </section>
        <section class="main-section" id="Troubleshooting">
            <header>Troubleshooting</header>
            <p>NordVPN is designed to provide a seamless and secure browsing experience.</p>
            <code>Common troubleshooting tips</code>
            <ul>
                <li>Check your internet connection</li>
                <li>Ensure NordVPN is properly installed</li>
                <li>Restart the app</li>
            </ul>
        </section>
    </main>
</body>
</html>






body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #f0f0f0;
    padding: 20px;
    border-right: 1px solid #ccc;
    overflow-y: auto; /* Allows scrolling if content overflows on small screens */
}

#navbar header {
    font-weight: bold;
    margin-bottom: 10px;
}

.nav-link {
    text-decoration: none;
    color: #337ab7;
    display: block;
    margin-bottom: 10px;
}

.nav-link:hover {
    color: #23527c;
}

#main-doc {
    margin-left: 220px; /* Leaves space for the navbar on the left */
    padding: 20px;
}

.main-section {
    margin-bottom: 20px;
}

.main-section header {
    font-weight: bold;
    margin-top: 10px;
}

code {
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 4px;
    display: block;
    margin-top: 10px;
}

ul {
    margin-top: 10px;
    padding-left: 20px;
}

li {
    margin-bottom: 5px;
}


@media (max-width: 768px) {
    #main-doc {
        margin-left: 180px; 
        padding: 10px;
    }

    #navbar {
        width: 150px; 
        padding: 8px;
    }
}
2

you forgot to add the ? at the end.

For future topics, use the Help button at the step where you are stuck. This will automatically add your code with a link to that step and auto-categorize your topic.
As this topic should be categorized under HTML-CSS, not JavaScript.

1 Like
3

Ok but can you help me with the problem

4

what did you not understand of “You forgot to add the ? at the end.” If you tell us we may be able to help you more

5

Yes, he forget to add the end section.

6

Am sorry am new at this whole thing but what’s does the ? Got to do with the code

7

this is the failing test, isn’t it?
if the text of the first child includes a ? but the id doesn’t, then they don’t match

8

Tell us what’s happening:

Hie so I’ve just finished with my technical document page but it’s telling that 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.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NordVPN Technical Documentation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="navbar">
        <header>NordVPN Technical Documentation</header>
        <a class="nav-link" href="#Introduction_to_VPN">Introduction to VPN</a>
        <a class="nav-link" href="#What_is_NordVPN">What is NordVPN?</a>
        <a class="nav-link" href="#Benefits_of_using_NordVPN">Benefits of using NordVPN</a>
        <a class="nav-link" href="#Getting_Started_with_NordVPN">Getting Started with NordVPN</a>
        <a class="nav-link" href="#Troubleshooting">Troubleshooting</a>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="Introduction_to_VPN">
            <header>Introduction to VPN</header>
            <p>A Virtual Private Network (VPN) is a secure and private way to browse the internet.</p>
            <p>It allows you to encrypt your data, hide your IP address, and surf the web anonymously.</p>
            <code>VPN creates a secure "tunnel" between your device and the internet</code>
            <ul>
                <li>Encrypts your data</li>
                <li>Hides your IP address</li>
            </ul>
        </section>
        
        <section class="main-section" id="What_is_NordVPN">
            <header>What is NordVPN?</header>
            <p>NordVPN is a VPN service that provides a secure and private connection to the internet.</p>
            <p>It offers advanced encryption and protection for your online activity.</p>
            <code>NordVPN uses advanced encryption methods and follows a strict no-logs policy</code>
            <ul>
                <li>Encrypts your internet traffic</li>
                <li>Hides your IP address</li>
                <li>Choose from over 5,000 servers in 60 countries</li>
            </ul>
        </section>
        
        <section class="main-section" id="Benefits_of_using_NordVPN">
            <header>Benefits of using NordVPN</header>
            <p>Using NordVPN provides numerous benefits, including enhanced online security and privacy.</p>
            <p>It also allows you to bypass geographic restrictions and access content that might otherwise be unavailable in your location.</p>
            <code>NordVPN protects your data from hackers and cyber threats</code>
            <ul>
                <li>Access geo-restricted content</li>
                <li>Enjoy online anonymity</li>
            </ul>
        </section>
        
        <section class="main-section" id="Getting_Started_with_NordVPN">
            <header>Getting Started with NordVPN</header>
            <p>Now that you know the benefits of using NordVPN, let's get started with installing and using the app!</p>
            <p>Here are the steps to follow to install and set up NordVPN on your device:</p>
            <code>Install NordVPN on your device</code>
            <ul>
                <li>Launch the NordVPN app</li>
                <li>Tap the "Sign Up" button</li>
                <li>Follow the on-screen instructions to create an account</li>
            </ul>
        </section>
        
        <section class="main-section" id="Troubleshooting">
            <header>Troubleshooting</header>
            <p>NordVPN is designed to provide a seamless and secure browsing experience.</p>
            <p>If you run into any issues, here are some common troubleshooting tips:</p>
            <code>Common troubleshooting tips</code>
            <ul>
                <li>Check your internet connection</li>
                <li>Ensure NordVPN is properly installed</li>
                <li>Restart the app</li>
            </ul>
        </section>
    </main>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #f0f0f0;
    padding: 20px;
    border-right: 1px solid #ccc;
    overflow-y: auto; 
}

#navbar header {
    font-weight: bold;
    margin-bottom: 10px;
}

.nav-link {
    text-decoration: none;
    color: #337ab7;
    display: block;
    margin-bottom: 10px;
}

.nav-link:hover {
    color: #23527c;
}

#main-doc {
    margin-left: 220px;
    padding: 20px;
}

.main-section {
    margin-bottom: 20px;
}

.main-section > header {
    font-weight: bold;
    margin-top: 10px;
    font-size: 1.5em; 
}

code {
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 4px;
    display: block;
    margin-top: 10px;
}

ul {
    margin-top: 10px;
    padding-left: 20px;
}

li {
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    #main-doc {
        margin-left: 180px; 
        padding: 10px;
    }

    #navbar {
        width: 150px; 
        padding: 8px;
    }
}

.main-section:target {
    border-left: 3px solid #337ab7;
    padding-left: 10px;
    background-color: #f9f9f9;
}

Your mobile information:

iPhone - iOS15.8.3

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

9

Please do not create duplicate threads for the same challenge. I have merged your threads.

Your id and header text do still not match.

id="What_is_NordVPN"

<header>What is NordVPN?</header>

Just add the question mark to your id value.

1 Like