Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

On the Technical Documentation Page project, test #20 keeps failing and I have no idea why that is? Am I doing something wrong, or is this a bug?

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" />
    <meta name="Tech" content="Technical Documentation Page" />
    <title>Technical Documentation Page</title>
   <link rel="stylesheet" href="styles.css" />
   </head>
   <nav id="navbar">
     <header>Documentation</header>
     <li><a class="nav-link" href="An_Introduction">An Introduction</a></li>
     <li><a class="nav-link" href="What_should_be_known_by_now">What should be known by now</a></li>
     <li><a class="nav-link" href="The_difference_between_Javascript_and_Java">The difference between Javascript and Java</a></li>
     <li><a class="nav-link" href="About_variables">About variables</a></li>
     <li><a class="nav-link" href="A_Reference">A Reference</a></li>
   </nav>
   <body>
     <main id="main-doc">
       <section class="main-section" id="An_Introduction">
         <header>An Introduction</header>
         <p></p>
         <p></p>
         <p></p>
       </section>
       <section class="main-section" id="What_should_be_known_by_now">
         <header>What should be known by now</header>
         <p></p>
         <li></li>
         <li></li>
         <li></li>
         <p></p>
       </section>
       <section class="main-section" id="The_difference_between_Javascript_and_Java">
         <header>The difference between Javascript and Java</header>
         <p></p>
         <p></p>
         <p></p>
       </section>
       <section class="main-section" id="About_variables">
         <header>About variables</header>
         <p></p>
         <li></li>
         <code></code>
         <li></li>
         <code></code>
         <li></li>
         <code></code>
         <p></p>
         <p></p>
         <li></li>
         <code></code>
         <li></li>
         <code></code>
       <section class="main-section" id="A_Reference">
         <header>A Reference</header>
         <p></p>
       </section>
    </main>
  </body>
   </html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body { 
margin: 0;
font-family: sans-serif;
}

header {
  text-align: center;
  padding: 32px;
  background-color: #ffffff;
  color: #0a0a24;
  font-size: 20px
}

@media (max-width: 599px) {
  
body {
  background-color: #E4E7F3;
  }
}

@media (min-width: 600px) {
  
body {
  background-color: #CBEFD4;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

What is test #20 and what debugging have you tried so far?

3

Test 20 involves giving each .nav-link its own href attribute that links to a corresponding .main section.
As for the bug, I have not tried any debugging, I was just wondering since I have no idea if I am doing something wrong that I am not detecting for that question or not.

4

I would attempt to figure out why the test is failing before asking for help. You learn more that way.

I’m not sure this is the HTML element you want here.

5

I did some more digging and found out that something I looked over before hand was vital. I don’t know if “spend more time figuring out why the test has failed” counts as a direct solution or not, but I will mark your reply as one anyhow. Thank you!

1 Like