Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I have problem at last step, it keeps telling me that"Your Technical Documentation project should use at least one media query."
I have linked css file on html and also edited Media in css, really couldn’t find out where went wrong, plz help!!!

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"
  <link rel="stylesheet" href="styles.css">
  <title>Computer languagies</title>
</head>
<body>
  <main id="main-doc">
    <h>Computer language</h>
    <nav id="navbar"><header>
      <ul>
        <li><a href="#C++" class="nav-link">C++</a></li>
        <li><a href="#Python" class="nav-link">Python</a></li>
        <li><a href="#Java" class="nav-link">Java</a></li>
        <li><a href="#C" class="nav-link">C</a></li>
        <li><a href="#Java_Script" class="nav-link">Java Script</a></li>
      </ul>
      </header></nav>
    <section class="main-section" id="C++">
      <header>C++</header>
      <ol><p>Company use C++ code</p>
        <li><p>Facebook</p></li>
        <li><p>NASA</p></li>
        <li><p>Microsoft</p></li>
      </ol>
    </section>
    <section class="main-section" id="Python">
      <header>Python</header>
      <ol><p>Company use C++ code</p>
        <li><p>Facebook</p></li>
        <li><p>NASA</p></li>
        <li><p>Microsoft</p></li>
      </ol>
    </section>
    <section class="main-section" id="Java">
      <header>Java</header>
      <ol><p>Company use C++ code</p>
        <li><p>Facebook</p></li>
        <li><p>NASA</p></li>
        <li><p>Microsoft</p></li>
      </ol>
    </section>
    <section class="main-section" id="C">
      <header>C</header>
      <ol><p>Company use C++ code</p>
        <li><p>Facebook</p></li>
        <li><p>NASA</p></li>
        <li><p>Microsoft</p></li>
      </ol>
      <p>for example
        <code>"int main(){ std::cout << "Hello World!";
}"</code>
      </p>
      <p>or:<code>  cout << "Enter two integers: ";
cin >> first_number >> second_number;</code></p>
<p>or:<code>  cout << "Enter two integers: ";
cin >> first_number >> second_number;</code></p>
<p>or:<code>  cout << "Enter two integers: ";
cin >> first_number >> second_number;</code></p>
<p>or:<code>  cout << "Enter two integers: ";
cin >> first_number >> second_number;</code></p>
    </section>
    <section class="main-section" id="Java_Script">
      <header>Java Script</header>
      <ol><p>Company use C++ code</p>
        <li><p>Facebook</p></li>
        <li><p>NASA</p></li>
        <li><p>Microsoft</p></li>
      </ol>
    </section>


  </main>
</body>
</html>

/* file: styles.css */
@media only screen and (max-width: 800px) {
#main-doc{
  margin-left: -10px;
}
}
}


  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Check how many brackets you are using. An extra bracket in the wrong place will stop the css working correctly.

@media only screen and (max-width: 800px) {
#main-doc{
  margin-left: -10px;
}
}
}

You also have a missing closing tag here.

<meta name="viewport" content="width=device-width, initial-scale=1.0"
  <link rel="stylesheet" href="styles.css">

Also, there is no html h element. I’m presuming this was intended to be a h1 element?

<h>Computer language</h>

3

I fix both of them now… still not passing

4

Okay try adding a closing slash / at the end of this link element before the closing brace. Links don’t have to be self closing to validate in html, and this is currently being changed.

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

If it still isn’t working after this, show me your updated code.

5 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    <link rel="stylesheet" href="styles.css"/>
    <title>Computer languagies</title>
  </head>
  <body>
    <main id="main-doc">
      <h1>Computer language</h1>
      <nav id="navbar"><header>
        <ul>
          <li><a href="#C++" class="nav-link">C++</a></li>
          <li><a href="#Python" class="nav-link">Python</a></li>
          <li><a href="#Java" class="nav-link">Java</a></li>
          <li><a href="#C" class="nav-link">C</a></li>
          <li><a href="#Java_Script" class="nav-link">Java Script</a></li>
        </ul>
        </header></nav>
      <section class="main-section" id="C++">
        <header>C++</header>
        <ol><p>Company use C++ code</p>
          <li><p>Facebook</p></li>
          <li><p>NASA</p></li>
          <li><p>Microsoft</p></li>
        </ol>
      </section>
      <section class="main-section" id="Python">
        <header>Python</header>
        <ol><p>Company use C++ code</p>
          <li><p>Facebook</p></li>
          <li><p>NASA</p></li>
          <li><p>Microsoft</p></li>
        </ol>
      </section>
      <section class="main-section" id="Java">
        <header>Java</header>
        <ol><p>Company use C++ code</p>
          <li><p>Facebook</p></li>
          <li><p>NASA</p></li>
          <li><p>Microsoft</p></li>
        </ol>
      </section>
      <section class="main-section" id="C">
        <header>C</header>
        <ol><p>Company use C++ code</p>
          <li><p>Facebook</p></li>
          <li><p>NASA</p></li>
          <li><p>Microsoft</p></li>
        </ol>
        <p>for example
          <code>"int main(){ std::cout << "Hello World!";
}"</code>
        </p>
        <p>or:<code>  cout << "Enter two integers: ";
  cin >> first_number >> second_number;</code></p>
  <p>or:<code>  cout << "Enter two integers: ";
  cin >> first_number >> second_number;</code></p>
  <p>or:<code>  cout << "Enter two integers: ";
  cin >> first_number >> second_number;</code></p>
  <p>or:<code>  cout << "Enter two integers: ";
  cin >> first_number >> second_number;</code></p>
      </section>
      <section class="main-section" id="Java_Script">
        <header>Java Script</header>
        <ol><p>Company use C++ code</p>
          <li><p>Facebook</p></li>
          <li><p>NASA</p></li>
          <li><p>Microsoft</p></li>
        </ol>
      </section>


    </main>
  </body>
</html>
6

I’ve edited your comment to format your code.

To format your code so it can be easily read surround it by back ticks, or highlight the pasted code and press the button that looks like this </>. The gif below gives a visual demonstration of both of these.

7

I also need to see your css code. This meta element also isn’t correctly closed still.

<meta name="viewport" content="width=device-width, initial-scale=1.0"

8

got it! problem solved, thanks tons!

1 Like
9

No problem!

As a one final note, don’t put p elements inside the ol element. This will throw an error.

<ol><p>Company use C++ code</p><!—will not validate correctly—>
          <li><p>Facebook</p></li>
          <li><p>NASA</p></li>
          <li><p>Microsoft</p></li>
        </ol>

I’d suggest in future running your code though a HTML validator like this one. It will help you catch a lot of errors that will not show up on the freecodecamp editor, but are good to recognise and avoid if you want to be a web designer.

10

thank you, I will keep that in mind, no more <p in the list!

1 Like
11

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