Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.
My code for the Build a Technical Documentation Page is posted below. The only problem I have left to solve for completion of the project is the proper use of at least on media query. I inserted a media query into my code as instructed in the Learn Responsive Web Design by Building a Piano project and from researching other resources. I have tried the media query in many different places in the my code and with many different combinations. Please advise as to how I need to construct the media query properly to complete this project. Thank you.
Your code so far

<!-- file: index.html -->
!DOCTYPE html>
  <html lang="en">
      <head>
        <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Build a Technical Documentation Page</title>
   <style>
    @media screen and (max-width: 350px) {
            body {
        font-size: 16px;
      }
    }
    </style>
    <link rel="stylesheet">
<a href="styles.css" id="build_a_technical_documentation_page" target="_blank"></a>
  </head>
    <body class="body">
<div id="side-nav">
<nav id="navbar">
  <ul>
<header id="head" align="left"> JavaScript Documentation</header>
<li><a class="nav-link" href="#introductions">Introductions</a></li>
        <li><a class="nav-link" href="#prior_experiences">Prior Experiences</a></li>
        <li><a class="nav-link" href="#javascript_and_javalight">JavaScript and Javalight</a></li>
        <li><a class="nav-link" href="#variables">Variables</a></li>
        <li><a class="nav-link" href="#declarations">Declarations</a></li>
        <li><a class="nav-link" href="#varing_in_scope">Varing In Scope</a></li>
        <li><a class="nav-link" href="#constants">Constants</a></li>
        <li><a class="nav-link" href="#varying_data_types">Varying Data Types</a></li>
        <li><a class="nav-link" href="#functional_declarations">Functional declarations</a></li>
    <li><a class="nav-link" href="#learned_behaviors">Learned Behaviors</a></li>    
        <li><a class="nav-link" href="#reference">Reference</a></li>
      </ul>
    </nav>
<main id="main-doc">
      <section class="main-section" id="introductions">
        <header>Introductions</header>
        <p><code></code></p>
        <p><code></code></p>
      </section>
      <section class="main-section" id="prior_experiences">
        <header>Prior Experiences</header>
        <p></p>
        <p><code></code></p>
      </section>
      <section class="main-section" id="javascript_and_javalight">
        <header>JavaScript and Javalight</header>
        <p></p>
        <p><code></code></p>
      </section>
      <section class="main-section" id="variables">
    <header>Variables</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="declarations">
    <header>Declarations</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="varing_in_scope">
    <header>Varing in Scope</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="constants">
    <header>Constants</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="varying_data_types">
    <header>Varying Data types</header>
     <p><code></code></p>
     <p></p>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      </ol>
  </section>
  <section class="main-section" id="functional_declarations">
    <header>Functional Declarations</header>
    <p></p>
  </section>
  <section class="main-section" id="learned_behaviors">
    <header>Learned Behaviors</header>
    <p></p>
  </section>
  <section class="main-section" id="reference">
    <header>Reference</header>
  </section>
     </main>
      </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/110.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

What exactly do you think these two lines of code do?

Also, the following code is not valid syntax:

  <ul>
<header id="head" align="left"> JavaScript Documentation</header>
<li><a class="nav-link" href="#introductions">Introductions</a></li>
        <li><a class="nav-link" href="#prior_experiences">Prior Experiences</a></li>
        <li><a class="nav-link" href="#javascript_and_javalight">JavaScript and Javalight</a></li>
        <li><a class="nav-link" href="#variables">Variables</a></li>
        <li><a class="nav-link" href="#declarations">Declarations</a></li>
        <li><a class="nav-link" href="#varing_in_scope">Varing In Scope</a></li>
        <li><a class="nav-link" href="#constants">Constants</a></li>
        <li><a class="nav-link" href="#varying_data_types">Varying Data Types</a></li>
        <li><a class="nav-link" href="#functional_declarations">Functional declarations</a></li>
    <li><a class="nav-link" href="#learned_behaviors">Learned Behaviors</a></li>    
        <li><a class="nav-link" href="#reference">Reference</a></li>
      </ul>

ul elements should only have li elements as children. You have a header element stuck in there that should not be nested within it. The header element is supposed to be nested within the element with id="navbar".

The link tag would be used to link an external stylesheet to the html document, which would indicate this Technical Document would be using the external stylesheet to define it styles. The a tag creates an empty hyperlink element, which should open it in a new window or tab. The href attribute in the a tag should specify the URL of styles.css and the id is pointing to Build a Technical Documentation Page itself. I only put them into my code in case they might help pass the media query pass the run test, because the media query I input failed to pass the test. I have no problem removing these lines of code if they are unnecessary. My main problem that I need you to focus on please, is the media query. I have built according to the instructions of the lessons provided. If these lines of code should be removed, please state so. But please focus on solving the problem with the media query, because it is the only thing holding me up from being able to submit my project successfully. Thank you.

This does absolutely nothing. You have to specify a url for the css using an href attribute.

This is an anchor element that links to styles.css which is not doing anything useful.

I added the href of styles.css to the link tag, but in run test I got a stack error in return. I think that is due to the program searching for a URL that cannot be found. However, I still have the problem in which the test returns the following: Your Technical Documentation project should use at least one media query.

I have removed the link and a tags completely, because they use of no use. The code is cleaner, but it still has the problem of when running the test the return is that one media query is required.

Having trouble sharing my code. Cannot copy to this chat. So, I have uploaded JPEG’s of my code. I removed the link and a tags we were discussing, because they were useless. I already have the required link tag in html element properly formatted. So all good there. Please help with the problem with the media query. It is the only problem left to solve to completing this project. Thank you.

Please do not post screenshots. To 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 (').

As previously stated, I removed the link and a tags the were useless. I already have the link tag with the necessary rel and href attributes properly formatted in the html element. However, I still have the problem of needing at least one media query when I run the test. This is the only and last problem to solve to complete this challenge. Please focus on this. Thank you.

<!DOCTYPE html>
  <html lang="en">
      <head>
        <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Build a Technical Documentation Page</title>
   <style>
    @media screen and (max-width: 350px) {
            body {
        font-size: 16px;
      }
    }
    </style>
      </head>
    <body class="body">
<div id="side-nav">
<nav id="navbar">
  <ul>
<header id="head" align="left"> JavaScript Documentation</header>
<li><a class="nav-link" href="#introductions">Introductions</a></li>
        <li><a class="nav-link" href="#prior_experiences">Prior Experiences</a></li>
        <li><a class="nav-link" href="#javascript_and_javalight">JavaScript and Javalight</a></li>
        <li><a class="nav-link" href="#variables">Variables</a></li>
        <li><a class="nav-link" href="#declarations">Declarations</a></li>
        <li><a class="nav-link" href="#varing_in_scope">Varing In Scope</a></li>
        <li><a class="nav-link" href="#constants">Constants</a></li>
        <li><a class="nav-link" href="#varying_data_types">Varying Data Types</a></li>
        <li><a class="nav-link" href="#functional_declarations">Functional declarations</a></li>
    <li><a class="nav-link" href="#learned_behaviors">Learned Behaviors</a></li>    
        <li><a class="nav-link" href="#reference">Reference</a></li>
      </ul>
    </nav>
<main id="main-doc">
      <section class="main-section" id="introductions">
        <header>Introductions</header>
        <p><code></code></p>
        <p><code></code></p>
      </section>
      <section class="main-section" id="prior_experiences">
        <header>Prior Experiences</header>
        <p></p>
        <p><code></code></p>
      </section>
      <section class="main-section" id="javascript_and_javalight">
        <header>JavaScript and Javalight</header>
        <p></p>
        <p><code></code></p>
      </section>
      <section class="main-section" id="variables">
    <header>Variables</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="declarations">
    <header>Declarations</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="varing_in_scope">
    <header>Varing in Scope</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="constants">
    <header>Constants</header>
    <p></p>
     <p><code></code></p>
  </section>
  <section class="main-section" id="varying_data_types">
    <header>Varying Data types</header>
     <p><code></code></p>
     <p></p>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      </ol>
  </section>
  <section class="main-section" id="functional_declarations">
    <header>Functional Declarations</header>
    <p></p>
  </section>
  <section class="main-section" id="learned_behaviors">
    <header>Learned Behaviors</header>
    <p></p>
  </section>
  <section class="main-section" id="reference">
    <header>Reference</header>
  </section>
     </main>
      </body>
     </html>

I figured it out. I did not realize to properly add the media query in the challenge I had to click the styles.css button at the top of the page, because this is not the way it is demonstrated in the Design by Building a Piano lesson. It would be helpful if there was better continuity in the instructions, and if you had answered my question the first time. Thank you.

Great glad you figured it out. Now you own that knowledge. His coaching was spot on we are not to give you the answer just point you in the right direction. good coding.