Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

This test case is showing error, but i have worked according to it, i have added text in a tag according to the releated header.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
        text-decoration: none;
        cursor:pointer;
      }
      @media (min-width: 480px){
        #navbar {
          position: fixed;
        }
      }
      </style>
      <nav id="navbar">
    </head>
    <body>
      
        <header><h1>JS Documentation</h1></header>
        <a class="nav-link" href="#Introduction" >Introduction</a>
      <a href="#What_you_should_already_know" class="nav-link">What you should already know</a> 
        <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
        <a class="nav-link" href="#Hello_world">Hello world</a>
        <a class="nav-link" href="#Variables">Variable</a>
       </nav>
      <main id="main-doc">
        <section class="main-section" id="Introduction">
          <header>Introduction</header>
          <p><code></code> </p>
          <p></p>
          <ul>
            <li>
          </ul>
          </section>
          <section class="main-section" id="What_you_should_already_know">
          <header>What you should already know</header>
          <p><code></code></p>
          <p></p>
          <ul>
            <li>
          </ul>
          </section>
          <section class="main-section" id="JavaScript_and_Java">
          <header>JavaScript and Java
</header>
          <p><code></code></p>
          <p></p>
          <ul>
            <li>
          </ul>          
          </section>
          <section class="main-section" id="Hello_world">
          <header>Hello world</header>
          <p><code></code></p>
          <p></p>
          <ul>
            <li>
          </ul>
          </section>
          <section class="main-section" id="Variables">
           <header>Variables</header>
           <p><code></code></p>
           <p></p>
          <ul>
            <li>
          </ul>
          </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/107.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Looks like a mismatch here.

1 Like
3

Hi @ayush123.456.ar, Welcome to the freeCodeCamp Forum.

In programming typos are really easy to do.

When you run your code or in other words are at the debugging portion, and find something is not working at a particular spot or you are getting an error dealing with a particular portion of the code. Then look very closely starting with the beginning of that code portion.
You just might find one of your tags in the wrong place as well as a misspelling.

Hope this helps.

Thanks,
Hal_Jordan

5

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