Technical Documentation Page - Build a Technical Documentation Page

chaisoman · March 31, 2025, 2:44am

Preformatted text### Tell us what’s happening:
I have linked my CSS file, but I keep getting this: my technical documentation page needs atleast one media quiery.

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>Web Development Basics</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="navbar">
        <header>Web Dev Basics</header>
        <a class="nav-link" href="#Introduction">Introduction</a>
        <a class="nav-link" href="#HTML_Fundamentals">HTML Fundamentals</a>
        <a class="nav-link" href="#CSS_Basics">CSS Basics</a>
        <a class="nav-link" href="#Responsive_Design">Responsive Design</a>
        <a class="nav-link" href="#Best_Practices">Best Practices</a>
    </nav>

    <main id="main-doc">
        <section class="main-section" id="Introduction">
            <header>Introduction</header>
            <p>Welcome to Web Development Basics documentation.</p>
            <p>This guide covers essential concepts for beginners.</p>
        </section>

        <section class="main-section" id="HTML_Fundamentals">
            <header>HTML Fundamentals</header>
            <p>HTML is the backbone of web pages.</p>
            <p>Basic HTML structure:</p>
            <code>
                &lt;!DOCTYPE html&gt;
                &lt;html&gt;
                &lt;head&gt;&lt;/head&gt;
                &lt;body&gt;&lt;/body&gt;
                &lt;/html&gt;
            </code>
            <p>Use semantic tags for better structure.</p>
        </section>

        <section class="main-section" id="CSS_Basics">
            <header>CSS Basics</header>
            <p>CSS styles your HTML content.</p>
            <p>Simple CSS example:</p>
            <code>
                body {
                    font-family: Arial;
                    color: #333;
                }
            </code>
            <p>You can link CSS using:</p>
            <code>&lt;link rel="stylesheet" href="styles.css"&gt;</code>
        </section>

        <section class="main-section" id="Responsive_Design">
            <header>Responsive Design</header>
            <p>Make websites work on all devices.</p>
            <p>Use media queries:</p>
            <code>
                @media (max-width: 600px) {
                    nav { width: 100%; }
                }
            </code>
            <p>Flexible layouts are key.</p>
        </section>

        <section class="main-section" id="Best_Practices">
            <header>Best Practices</header>
            <p>Follow these guidelines:</p>
            <ul>
                <li>Write clean, readable code</li>
                <li>Use meaningful variable names</li>
                <li>Keep files organized</li>
                <li>Comment your code</li>
                <li>Test across browsers</li>
            </ul>
            <p>Consistency is crucial.</p>
            <code>/* Always add comments */</code>
        </section>
    </main>
</body>
</html>

/* file: styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: #2c3e50;
    color: white;
    padding: 20px;
}

#navbar header {
    font-size: 1.5em;
    margin-bottom: 20px;
    text-align: center;
}

.nav-link {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

.nav-link:hover {
    background-color: #34495e;
}

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

.main-section {
    margin-bottom: 30px;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.main-section header {
    font-size: 1.8em;
    color: #2c3e50;
    margin-bottom: 15px;
}

code {
    display: block;
    background-color: #f0f0f0;
    padding: 10px;
    margin: 10px 0;
    border-radius: 3px;
    white-space: pre-wrap;
}
@media (max-width: 768px) {
    #navbar {
        position: static;
        width: 100%;
        height: auto;
    }

    #main-doc {
        margin-left: 0;
        width: 50px;
    }
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Teller · March 31, 2025, 3:04am

Hi @chaisoman

Please post your full HTML. I did not see a link element.

Happy coding

chaisoman · March 31, 2025, 3:23am

here is the full HTML.

<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">`<link rel="stylesheet" href="styles.css">`
</head>

it seems the part of the link element is not showing.

Teller · March 31, 2025, 9:13pm

Hi @chaisoman

I edited your post so the code correctly formats on the forum.
Looks like there are two link elements - you only need one.

Happy coding

chaisoman · April 1, 2025, 5:13am

hello Teller,
i have removed the second link but it still tells me that my technical documentation page needs atleast one @media queire. am confused.

Teller · April 1, 2025, 6:55pm

Hi @chaisoman

So the forum can assist please post your full code.

Use the following method to post code to the forum:

On a separate line type three back ticks.
On a separate line paste your code.
On the last line type three back ticks. Here is a single back tick `

Happy coding

chaisoman · April 2, 2025, 2:59pm

Thanks let me use that, the full code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Development Basics</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="navbar">
        <header>Web Dev Basics</header>
        <a class="nav-link" href="#Introduction">Introduction</a>
        <a class="nav-link" href="#HTML_Fundamentals">HTML Fundamentals</a>
        <a class="nav-link" href="#CSS_Basics">CSS Basics</a>
        <a class="nav-link" href="#Responsive_Design">Responsive Design</a>
        <a class="nav-link" href="#Best_Practices">Best Practices</a>
    </nav>

    <main id="main-doc">
        <section class="main-section" id="Introduction">
            <header>Introduction</header>
            <p>Welcome to Web Development Basics documentation.</p>
            <p>This guide covers essential concepts for beginners.</p>
        </section>

        <section class="main-section" id="HTML_Fundamentals">
            <header>HTML Fundamentals</header>
            <p>HTML is the backbone of web pages.</p>
            <p>Basic HTML structure:</p>
            <code>
                &lt;!DOCTYPE html&gt;
                &lt;html&gt;
                &lt;head&gt;&lt;/head&gt;
                &lt;body&gt;&lt;/body&gt;
                &lt;/html&gt;
            </code>
            <p>Use semantic tags for better structure.</p>
        </section>

        <section class="main-section" id="CSS_Basics">
            <header>CSS Basics</header>
            <p>CSS styles your HTML content.</p>
            <p>Simple CSS example:</p>
            <code>
                body {
                    font-family: Arial;
                    color: #333;
                }
            </code>
            <p>You can link CSS using:</p>
            <code>&lt;link rel="stylesheet" href="styles.css"&gt;</code>
        </section>

        <section class="main-section" id="Responsive_Design">
            <header>Responsive Design</header>
            <p>Make websites work on all devices.</p>
            <p>Use media queries:</p>
            <code>
                @media (max-width: 600px) {
                    nav { width: 100%; }
                }
            </code>
            <p>Flexible layouts are key.</p>
        </section>

        <section class="main-section" id="Best_Practices">
            <header>Best Practices</header>
            <p>Follow these guidelines:</p>
            <ul>
                <li>Write clean, readable code</li>
                <li>Use meaningful variable names</li>
                <li>Keep files organized</li>
                <li>Comment your code</li>
                <li>Test across browsers</li>
            </ul>
            <p>Consistency is crucial.</p>
            <code>/* Always add comments */</code>
        </section>
    </main>
</body>
</html>

here is the CSS code:

body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: #2c3e50;
    color: white;
    padding: 20px;
}

#navbar header {
    font-size: 1.5em;
    margin-bottom: 20px;
    text-align: center;
}

.nav-link {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

.nav-link:hover {
    background-color: #34495e;
}

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

.main-section {
    margin-bottom: 30px;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.main-section header {
    font-size: 1.8em;
    color: #2c3e50;
    margin-bottom: 15px;
}

code {
    display: block;
    background-color: #f0f0f0;
    padding: 10px;
    margin: 10px 0;
    border-radius: 3px;
    white-space: pre-wrap;
}
@media (max-width: 768px) {
    #navbar {
        position: static;
        width: 100%;
        height: auto;
    }

    #main-doc {
        margin-left: 0;
        width: 50px;
    }
}

@teller Thanks again; forum here is the code and i can’t tell why the hint keep saying i should have at least one @media query, which i have and i have linked my css to the html file.

fcc4b6d10c4-b540-4e2 · April 2, 2025, 3:51pm

https://www.w3schools.com/cssref/atrule_media.php

Teller · April 2, 2025, 9:23pm

Hi @chaisoman

Your code passes.
Reset the step and try again. If that doesn’t work, refresh the page, disable dark mode, disable ad blockers. Or, use another browser.
If the above steps do not work, you may need to restart the computer.

Happy coding

chaisoman · April 4, 2025, 2:26pm

i tried even restarted my system, what is wrong or where am i wrong?

ILM · April 4, 2025, 5:39pm

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

chaisoman · April 5, 2025, 4:45am

Thanks for your concern, i tried all the options i still get the same message.

ILM · April 5, 2025, 7:41am

what browsers have you tried?

chaisoman · April 17, 2025, 10:26am

Chrome, Mozila and microsoft Edge.

chaisoman · April 18, 2025, 3:11pm

i need help am still stuck here.

ILM · April 18, 2025, 3:13pm

we are not able to help you more than this, your code passes

can you open the browser console, run the tests, and share what appear there?

Topic		Replies	Views
Technical Documentation Page - Build a Technical Documentation Page HTML-CSS	3	226	October 13, 2023
Technical Documentation Page - Build a Technical Documentation Page HTML-CSS	7	25	February 20, 2025
Technical Documentation Page - Build a Technical Documentation Page HTML-CSS	10	289	March 20, 2023
Technical Documentation Page - Build a Technical Documentation Page HTML-CSS	2	17	February 20, 2025
Technical Documentation Page - Build a Technical Documentation Page HTML-CSS	3	114	May 17, 2024

Technical Documentation Page - Build a Technical Documentation Page

Your code so far

Your browser information:

Challenge Information:

Related topics