Technical documentation page

Hello. Please help. I don´t know why my code doesn´t pass. The last item has one media query as asked.

<!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>Documentation Page</title>
  </head>
  <style>
    a {
      display: block;
      text-decoration: none;
      color: black;
    }
    #navbar {
      display: block;
      width: 240px;
      border: 1px solid black;
      float: left;
    }
    #main-doc {
      position: absolute;
      margin-left: 250px;
      margin-top: 0;
      border: 1px solid black;
    }
    @media only screen and (max-width: 600px) {      
      #main-doc {
        margin-left: 0px;
        margin-top: 220px;
      }
    }
  </style>  
  <body>
    <nav id="navbar">
      <header>JS Documentation</header>
      <a class="nav-link" href="#Introduction">Introduction</a>
      <a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
      <a class="nav-link" href="#Javascript_and_Java">Javascript and Java</a>
      <a class="nav-link" href="#Hello_world">Hello world</a>
      <a class="nav-link" href="#Variables">Variables</a>
      <a class="nav-link" href="#Declaring_Variables">Declaring Variables</a>
      <a class="nav-link" href="#Variable_Scope">Variable Scope</a>
      <a class="nav-link" href="#Global_Variables">Global Variables</a>
      <a class="nav-link" href="#Constants">Constants</a>
      <a class="nav-link" href="#Data_types">Data types</a>      
    </nav>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <p>
          <ul>
            <li>Client-side</li>
            <li>Server-side</li>
          </ul>
        </p>
      </section>
      <section class="main-section" id="What_you_should_already_know">
        <header>What you should already know</header>
        <p>
          <ul>
            <li>Understanding</li>
            <li>Knowledge</li>
            <li>Experience</li>
          </ul>
        </p>
      </section>
      <section class="main-section" id="Javascript_and_Java">
        <header>Javascript and Java</header>
        <p>JavaScript and Java are similar</p>
      </section>
      <section class="main-section" id="Hello_world">        
        <header>Hello world</header>
        <p>to get started</p>
        <code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code>
      </section>
      <section class="main-section" id="Variables">
        <header>Variables</header>
        <p>You use variables as symbolic names</p>
      </section>
      <section class="main-section" id="Declaring_Variables">
        <header>Declaring Variables</header>
        <p>You can declare a variable in three ways:</p>
        <code>var x = 42</code>
        <code>x = 42</code>
        <code>let y = 13</code>
      </section>
      <section class="main-section" id="Variable_Scope">
        <header>Variable Scope</header>
        <p></p>
        <code></code>
        <code></code>
      </section>
      <section class="main-section" id="Global_Variables">
        <header>Global Variables</header>
        <p></p>
      </section>
      <section class="main-section" id="Constants">
        <header>Constants</header>
        <p></p>
        <code></code>
        <code></code>
        <code></code>
      </section>
      <section class="main-section" id="Data_types">
        <header>Data types</header>
        <p></p>
      </section>
    </main>
  </body>
</html>

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 (').

can you post a link to the challenge you are on?

Also please move this code into the styles.css file and make sure you are linking to it in index.html

1 Like

Thank you very much. It is done!

1 Like

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