Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <style>

@media (max-width: 768px) {
 
  }

  #main-doc {
    margin-left: 0;
  }
}
</style>
  <nav id="navbar">
    <header>Technical Documentation</header>
    <a class="nav-link" href="#HTML">HTML</a>
    <a class="nav-link" href="#CSS">CSS</a>
    <a class="nav-link" href="#JavaScript">JavaScript</a>
    <a class="nav-link" href="#Python">Python</a>
    <a class="nav-link" href="#Ruby">Ruby</a>
  </nav>

  <main id="main-doc">
    <section class="main-section" id="HTML">
      <header>HTML</header>
      <p>HTML stands for HyperText Markup Language.</p>
      <!-- More content goes here -->
    </section>

    <section class="main-section" id="CSS">
      <header>CSS</header>
      <p>CSS stands for Cascading Style Sheets.</p>
      <!-- More content goes here -->
    </section>

    <section class="main-section" id="JavaScript">
      <header>JavaScript</header>
      <p>JavaScript is a programming language.</p>
      <!-- More content goes here -->
    </section>

    <section class="main-section" id="Python">
      <header>Python</header>
      <p>Python is a high-level programming language.</p>
      <!-- More content goes here -->
    </section>

    <section class="main-section" id="Ruby">
      <header>Ruby</header>
      <p>Ruby is a dynamic, reflective, object-oriented programming language.</p>
      <!-- More content goes here -->
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>


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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Welcome to our community!

Please 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!

3 
@media (max-width: 768px) {
 
  }

  #main-doc {
    margin-left: 0;
  }
}

You didn’t put the selector inside the media query. You closed } the media query before the selector and you added an extra } at the end that shouldn’t be there (or before the selector, take your pick).

Also, you should put the CSS in the styles.css file.

The rest of the requirements are self-explanatory.

4

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