Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening: I’m stuck with the @media query
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang:"en"></html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device=width, initial-scale=1.0"/>
  <link rel="stylesheet" href="styles.css"/>
  <style>
    h3{
      font-family: Tahoma;
      color: black;
    }
    body{
      background-color: yellow;
    }
    #navbar{
      display: flex;
      position: fixed;
    }
@media (max-width: 768px) {
  body{
    background-color: white;
  }
}
  </style>
  <title>Technical Documentation Page</title>
</head>
<main id="main-doc">
  <section class="main-section" id="Introduction"><header><h3>Introduction</h3></header>
    <p></p>
    <ul>
      <li></li>
    </ul>
    <p><code></code></p>
  </section>
  <section class="main-section" id="What_you_should_already_know"><header><h3>What you should already know</h3></header>
    <p>
    <ul>
      <li></li>
    </ul></p>
    <p><code></code></p>
  </section>
  <section class="main-section" id="Javascript_and_Java"><header><h3>Javascript and Java</h3></header>
    <p><code></code>
    <ul>
      <li></li>
      <li></li>
    </ul></p>
    <p><code></code></p>
  </section>
<section class="main-section" id="Hello_world"><header><h3>Hello world</h3></header>
  </section>
  <p><code></code></p>
  </section>
  <section class="main-section" id="Variable"><header><h3>Variable</h3></header>
    <p></p>
    <ul>
      <li></li>
    </ul>
    <p><code></code></p>
  </section>
  <section >
    <nav id="navbar"><header><h3>References</h3></header><ul>
      <li><a class="nav-link" href="#Introduction">Introduction</a>
      </li>
    <li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
    </li>
   <li><a class="nav-link" href="#Javascript_and_Java">Javascript and Java</a>
   </li>
    <li><a class="nav-link" href="#Hello_world" >Hello world</a>
    </li>
    <li><a class="nav-link" href="#Variable">Variable</a></li></ul></nav></section>
</main>
<body>

</body>

/* 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/106.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Move all the css into the stylesheet styles.css

3

Tests also pass if you remove the <link rel="stylesheet" href="styles.css"> line, or if you add only the @media part to the stylesheet.css. Although I agree that moving everything about styles into styles.css is the best choice.

The error message Your Technical Documentation project should use at least one media query. is not helpful though. Is using media queries in the <style> tag invalid code? Why? It seems to work for me, background color changes! As I found online, media queries can not be used within inline styles, but it seems like it can be used in the <style> tag.

If using styles inside of the <style> tag is not allowed, then why I can pass the tests by removing the <link rel="stylesheet" href="styles.css"> line?

I’m confused!

4

it is not invalid. the issue is simply a matter of following the exercise instructions which state

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

5

thanks buddy, i appreciated

6

Then the tests should not pass if there is no <link rel="stylesheet" href="styles.css"> or if the css file is empty, isn’t it? But if I just remove the <link> part and leave the css file empty, all tests pass! Shouldn’t an error be returned instead?

<!-- file: index.html -->
<!DOCTYPE html>
<html lang:"en"></html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device=width, initial-scale=1.0"/>
  <!-- <link rel="stylesheet" href="styles.css"/> -->
  <style>
    h3{
      font-family: Tahoma;
      color: black;
    }
    body{
      background-color: yellow;
    }
    #navbar{
      display: flex;
      position: fixed;
    }
@media (max-width: 768px) {
  body{
    background-color: white;
  }
}
  </style>
  <title>Technical Documentation Page</title>
</head>
<main id="main-doc">
  <section class="main-section" id="Introduction"><header><h3>Introduction</h3></header>
    <p></p>
    <ul>
      <li></li>
    </ul>
    <p><code></code></p>
  </section>
  <section class="main-section" id="What_you_should_already_know"><header><h3>What you should already know</h3></header>
    <p>
    <ul>
      <li></li>
    </ul></p>
    <p><code></code></p>
  </section>
  <section class="main-section" id="Javascript_and_Java"><header><h3>Javascript and Java</h3></header>
    <p><code></code>
    <ul>
      <li></li>
      <li></li>
    </ul></p>
    <p><code></code></p>
  </section>
<section class="main-section" id="Hello_world"><header><h3>Hello world</h3></header>
  </section>
  <p><code></code></p>
  </section>
  <section class="main-section" id="Variable"><header><h3>Variable</h3></header>
    <p></p>
    <ul>
      <li></li>
    </ul>
    <p><code></code></p>
  </section>
  <section >
    <nav id="navbar"><header><h3>References</h3></header><ul>
      <li><a class="nav-link" href="#Introduction">Introduction</a>
      </li>
    <li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
    </li>
   <li><a class="nav-link" href="#Javascript_and_Java">Javascript and Java</a>
   </li>
    <li><a class="nav-link" href="#Hello_world" >Hello world</a>
    </li>
    <li><a class="nav-link" href="#Variable">Variable</a></li></ul></nav></section>
</main>
<body>

</body>
7

i didn’t write the tests so i cannot comment on why the test is not strictly enforcing this. As I said, the code either way is not invalid.
but using a stylesheet is good practice and learners are expected by the instructions to learn how to use it.

if you believe this is a bug, please open a github issue to discuss it with the code maintainers.

Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

8

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