Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

I finish everything and I included style however, I’m not sure what’s going on and why it’s not submitted it a closed properly the media with brackets and it’s still just incorrect. Please help me out I would like to know my mistake

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">
  <!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">
  <style>
    @media (max-width: 500px) {
      body {
        background: lightblue;
      }
      #main-doc {
        width: 100%;
        max-width: 460px;
        margin: auto;
      }

      li {
        color: blue;
        font-size: 18px;
      }

      .nav-link {
        color: green;
        font-size: 23;
      }

      #navbar {
        position: fixed;
        left: 0;
      }
    }
    
  </style>

  <title>Tal's work</title>
</head>
<body>
  <main id="main-doc">
    <section id="Tal" class="main-section">
      <header>Tal</header>
      <p></p>
      <p></p>
      <code></code>
      <code></code>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
    </section>

    <section class="main-section" id="JavaScript_and_Java">
      <header>JavaScript and Java</header>
      <p></p>
      <p></p>
      <p></p>
      <code></code>
      <code></code>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
    </section>

    <section class="main-section" id="css">
      <header>css</header>
      <p></p>
      <p></p>
      <p></p>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
      <code></code>
    </section>

    <section class="main-section" id="success">
      <header>success</header>
      <p></p>
      <p></p>
      <p></p>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
      <code></code>
    </section>

    <section class="main-section" id="Hello_world">
      <header>Hello world</header>
      <p></p>
      <p></p>
      <code></code>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
    </section>

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

  <nav id="navbar">
    <header>Tal</header>
    <a class="nav-link" href="#Tal">Tal</a>
    <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
    <a class="nav-link" href="#css">css</a>
    <a class="nav-link" href="#success">success</a>
    <a class="nav-link" href="#Hello_world">Hello world</a>
  </nav>
</body>
</html>




/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

4

Describe your issue in detail here.
I finish everything and I included style however, I’m not sure what’s going on and why it’s not submitted it a closed properly the media with brackets and it’s still just incorrect. Please help me out I would like to know my mistake

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">
  <style>
    @media only screen and (max-width: 500px) {
      body {
        background: lightblue;
      }

      #main-doc {
        width: 100%;
        max-width: 460px;
        margin: auto;
      }

      li {
        color: blue;
        font-size: 18px;
      }

      .nav-link {
        color: green;
        font-size: 23px;
      }

      #navbar {
        position: fixed;
        left: 0;
      }
    }
  </style>


  <title>Tal's work</title>
</head>
<body>
  <main id="main-doc">
    <section id="Tal" class="main-section">
      <header>Tal</header>
      <p></p>
      <p></p>
      <code></code>
      <code></code>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
    </section>

    <section class="main-section" id="JavaScript_and_Java">
      <header>JavaScript and Java</header>
      <p></p>
      <p></p>
      <p></p>
      <code></code>
      <code></code>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
    </section>

    <section class="main-section" id="css">
      <header>css</header>
      <p></p>
      <p></p>
      <p></p>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
      <code></code>
    </section>

    <section class="main-section" id="success">
      <header>success</header>
      <p></p>
      <p></p>
      <p></p>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
      <code></code>
    </section>

    <section class="main-section" id="Hello_world">
      <header>Hello world</header>
      <p></p>
      <p></p>
      <code></code>
      <ul>
        <li>good</li>
        <li>better</li>
      </ul>
    </section>

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

  <nav id="navbar">
    <header>Tal</header>
    <a class="nav-link" href="#Tal">Tal</a>
    <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
    <a class="nav-link" href="#css">css</a>
    <a class="nav-link" href="#success">success</a>
    <a class="nav-link" href="#Hello_world">Hello world</a>
  </nav>
</body>
</html>




/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

5

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

6

I am as confused as you are. Tried everything :man_shrugging:

1 Like
7

I really am not sure what’s going on. I submitted the style, so good and I added as much as I can but it’s still show me an error.
-your Technical Documentation project should use at least one media query.

8

Get rid of this link. Your code should pass.

1 Like
10

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