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:

1 Like

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.

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.

1 Like

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.

1 Like

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.

Hi everyone, I am little stuck on these two steps and I can’t figure out how to complete the task.

  1. Your #navbar should have exactly one header element within it.
    (if I move the header after the nav, I get the error cause “The first child of each .main-section should be a header element.”)

2. The header element in the #navbar should come before any link (a ) elements also in the #navbar .
(No idea how to get around this)

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <title></title>
  <body>

<main id="main-doc">
  <h2>JS Documentation</h2>

  <section class="main-section" id="Introduction">
    <header>
    <nav id="navbar">
      <h4><a class="nav-link" href="#Introduction">Introduction</a>
      </h4>
      </nav>
    </header>
    <p></p>
    <p></p>
    <code></code>
      <ul>
      <li>bla bla bla</li>
      </ul>
</section>

  <section class="main-section" id="What_you_should_already_know">
   <header>
     <nav id="navbar">
       <h4>
       <a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
       </h4>
   </nav>
    </header>
    <p></p>
    <p></p>
    <code></code>
    <ul>
      <li>ble ble ble</li>
      </ul>
  </section>

  <section class="main-section" id="Javascript_and_Java">
          <header>
            <nav id="navbar">
       <h4> 
         <a class="nav-link" href="#Javascript_and_Java">JavaScript and Java</a>
         </h4>
    </nav>
            </header>
    
    <p></p>
    <p></p>
    <code></code>
    <ul>
      <li> blo blo blo</li>
      </ul>
  </section>

  <section class="main-section" id="Hello_World">
         <header>
           <nav id="navbar">
            <h4>
        <a class="nav-link" href="#Hello_World">Hello World</a>
        </h4>
    </nav>
    </header>
    <p></p>
    <p></p>
    <code></code>
    <ul>
      <li>bli bli bli</li>
      </ul>
  </section>

  <section class="main-section" id="Variables">
        <header>
          <h4>
    <nav id="navbar">
        <a class="nav-link" href="#Variables">Variables</a>
        </h4>
    </nav>
        </header>
    <p></p>
    <p></p>
    <code></code>
    <ul>
      <li>blu blu blu</li>
      </ul>

    </section>

  </main>

</body>
</html>
type or paste code here
1 Like

Hey @tonyprp , welcome to the forum! Its better if you create your own post instead of posting on another. What you can do is if you have tried to solve the challenge at least three times then you should see either a ask for help button or a question mark come up. If you click on this then it will generate a fresh post for you with a link to the challenge, and all your current code. This way those reading your post will know exactly how to help you.

2 Likes

thank you and sorry about that. x

No worries, just something to keep in mind so when you have your own post then we can focus solely on helping you. If you still need help you should see this button, and it should get your post started for you
image

Hi, could you clarify how you figured it out, please. I am stuck in the same step.

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.