Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Hi guys!
Am having problem finishing my project. I have included the media query but it is still giving me an error. What is wrong with my media query?

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">
    <link rel="stylesheet" href="/styles.css">
    <title>Technical documentation Page</title>
    </head>
    <body>
      <nav id="navbar">
        <header>
      Software Engineer Documentation
      </header>
      <ul>
        <li><a class="nav-link" href="#Introduction">Introduction</a></li>
      <li><a class="nav-link" href="#What_you_should_know">What you should know</a></li>
      <li><a class="nav-link" href="#CSS">CSS</a></li>
      <li><a class="nav-link" href="#HTML">HTML</a></li>
      <li><a class="nav-link" href="#Javascript">Javascript</a></li>
      </nav>
<main id="main-doc">
        <section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<p>Dear software engineers, welcome to our documentation page.</p> 
<p>We are going to talk about the main building blocks for front-end software engineer</p>      
<p>We shall talk about the following:</p>
            <ul>
              <li>HTML</li>
              <li>CSS</li>
              <li>Javascript</li>
              </ul>
              </article>
        </section>
        <section class="main-section" id="What_you_should_know">
          <header>What you should know</header>
            <article>
              <p>The following serves as a guideline</p>
          <p>We assume that you already have a basic knowledge of the following:</p>
          <ul>
          <li>basic knowledge of HTML</li>
          <li>basic knowledge of CSS</li>  
          </ul>
          </article>
        </section>
        <section class="main-section" id="CSS">
          <header>CSS</header>
          <article>
            <p>This is very important especially when we want to alter the appearance of  our website.</p>
        <p>Before using  Css one should create a link for it</p>
        <p>Css works hand in hand with HTML</p>
        <code>
          * {
            background-color: black;
          }
          </code>
          <code>
            body {
              font-size: 25px;
            }
            </code>
          </article>
        </section>
         <section class="main-section" id="HTML">
<header>HTML</header>
<article>
<p>HTML stands for HyperText Markup Language</p>
           <p>It is the main requirement for web-design</p>
           <p>You can learn it within a week</p>
           <code>
             <!Doctype html>
             </code>
             <code>
               <metacharset = UTF-8>
               </code>
</article>   
        </section>
<section class="main-section" id="Javascript">
  <header>Javascript</header>
  <article>
  <p>Javascript was introduced to make our websites responsive</p>
<p>This helps one to easily navigate through the website</p>
<p>This is the main backbone of web development</p>
<code>
  var x = 5;
  print(x)
  </code>
  </article>
</section>
        </main>
      </body>
  </html>


/* file: styles.css */
@media (max-width: 1600px) {
 body {
   background-color: green;
 } 
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

double check this value. It looks wrong.

Edit: looking at the instructions it says:

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

3

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