Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Step 15 I can not get passed it. I get the following error, Your Technical Documentation project should use at least one media query.

Your code so far

<!-- file: index.html -->

/* file: styles.css */

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

1 Like

Please post your code. thanks

1 Like

To learn more about media queries: Using media queries - CSS: Cascading Style Sheets | MDN (mozilla.org)

body {
margin: 0;
padding: 0;
}

#navbar {
background-color: #333;
color: white;
width: 200px;
position: fixed;
top: 0;
left: 0;
height: 100%;
overflow-y: auto;
}

.navbar-header {
font-size: 1.5em;
font-weight: bold;
color: whitesmoke;
margin: 10px;
}

.nav-link {
display: block;
text-decoration: none;
color: white;
padding: 10px;
transition: background-color 0.3s;
}

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

.main-section {
padding: 20px;
}

header {
font-size: 1.2em;
font-weight: bold;
}

#navbar {
background-color: #333;
color: white;
width: 200px;
position: fixed;
top: 0;
left: 0;
height: 100%;
}

@media (min-width: 768px) {
#navbar {
width: 250px;
}
}

1 Like

Hello!
Can you please post your head element code as well.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Technical Documentation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<nav id="navbar">
    <header class="navbar-header">Technical Documentation</header>
    <a class="nav-link" href="#HTML_and_CSS">HTML and CSS</a>
    <a class="nav-link" href="#JavaScript">JavaScript</a>
    <a class="nav-link" href="#Python">Python</a>
    <a class="nav-link" href="#React">React</a>
    <a class="nav-link" href="#APIs">APIs</a>
</nav>

<main id="main-doc">

    <section id="HTML_and_CSS" class="main-section">
        <header>HTML and CSS</header>
         <p><span>The HyperText Markup Language or HTML</span> is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
         <p>HTML code example: *</p>
           <code> < p > this a paragraph element in HTML < /p > </p></code>
         <p><span>Cascading Style Sheets (CSS)</span> is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
         <p>CSS code example: *</p>
            <code> p { text - align: is the CSS selector applied to align text of the paragraph element } </code>

    </section> 

    <section id="JavaScript" class="main-section">
        <header>JavaScript</header>
         <p><span>JavaScript</span>, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior,[10] often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.</p>
         <p>JS code example: *</p>
           <code> function greetMe(yourName) { alert("Hello " + yourName); }
            greetMe("World");</code>
    </section>

    <section id="Python" class="main-section">
        <header>Python</header>
         <p><span>Python</span> is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation.</p>
         <p>Python code example: *</p>
           <code> print('Hello, world!') </code>
    </section>

    <section id="React" class="main-section">
        <header>React</header>
         <p><span>React</span> (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.</p>
         <p>React code example: *</p>
           <code> const root = ReactDOM.createRoot(document.getElementById('root'));
            root.render(< h1 >Hello, world!< /h1 >); </code>
    </section>

    <section id="APIs" class="main-section">
        <header>APIs</header>
        <p>An <span>Application Programming Interface (API)</span> is a way for two or more computer programs to communicate with each other. It is a type of software interface, offering a service to other pieces of software.[1] A document or standard that describes how to build or use such a connection or interface is called an API specification. A computer system that meets this standard is said to implement or expose an API. The term API may refer either to the specification or to the implementation. Whereas a system's user interface dictates how its end-users interact with the system in question, its API dictates how to write code that takes advantage of that system's capabilities.</p>
         <p>Common font API's examples:</p>
              <li>Google Fonts</li>
              <li>Font Awesome</li>
              <li>Mapbox</li>
              <li>Adobe</li>
              <li>GitHub</li>
    </section>

</main>

</body>
</html>
1 Like

I sure can and sorry i thought entered the data when i first opened the post.

Where is your <link> tag for CSS file?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Technical Documentation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<nav id="navbar">
    <header class="navbar-header">Technical Documentation</header>
    <a class="nav-link" href="#HTML_and_CSS">HTML and CSS</a>
    <a class="nav-link" href="#JavaScript">JavaScript</a>
    <a class="nav-link" href="#Python">Python</a>
    <a class="nav-link" href="#React">React</a>
    <a class="nav-link" href="#APIs">APIs</a>
</nav>

<main id="main-doc">

    <section id="HTML_and_CSS" class="main-section">
        <header>HTML and CSS</header>
         <p><span>The HyperText Markup Language or HTML</span> is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
         <p>HTML code example: *</p>
           <code> < p > this a paragraph element in HTML < /p > </p></code>
         <p><span>Cascading Style Sheets (CSS)</span> is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
         <p>CSS code example: *</p>
            <code> p { text - align: is the CSS selector applied to align text of the paragraph element } </code>

    </section>
1 Like
Technical Documentation

I asked for :

<link rel="stylesheet" href="styles.css">

It should be between your <head> </head>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').