Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I am not sure what is to be done with the “navbar” elements, the instructions require me to. and what do i need to do to properly link the sections of the page to the element. i have tried but i seem to have got it wrong. please help.

i also am stuck with the styling through CSS. i barely wrote a styling there.

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"/>
   <link rel="stylesheet" href="styles.css"/>
   <title>JS Documentation</title>
   </head>
  <main id="main-doc">
    <section class="main-section" id="Introduction">
       <header>Introduction
        </header>
       <nav id="navbar">
         <header>
           <a class="nav-link" href="Introduction">Introduction</a>
         </header>
       </nav>
      <p></p>
      <p></p>
       <li></li>
       <li></li>

     </section>
    <section class="main-section" id="What_you_should_already_know">
      <header>What you should already know
        </header>
      <nav id="navbar">
        <header><a class="nav-link" href="What_you_should_already_know">What you should already know</a>
         </header>        
        </nav>
      <p></p>
      <li></li>
      <li></li>
      <li></li>
     </section>
     <section class="main-section" id="JavaScript_and_Java">
      <header>JavaScript and Java</header>
      <nav id="navbar">
        <header>
          <a class="nav-link" href="JavaScript_and_Java">JavaScript and Java</a>
        </header>        
      </nav>
      <p></p>
      <p></p>
      <p></p>
     </section>
     <section class="main-section" id="Hello_world">
      <header>Hello world
        </header>
      <nav id="navbar">
        <header><a class="nav-link" href="Hello_world">Hello world</a></header>
      </nav>
      <p></p>
      <code>function greetMe(yourName) { alert("Hello " + yourName); }
      </code>
      <code>greetMe("World");</code>
      <p></p>
     </section>
     <section class="main-section" id="Variables">
      <header>Variables
        </header>
      <nav id="navbar">
        <header><a class="nav-link" href="Variables">Variables</a></header>        
      </nav>
      <p><p>
     </section>
     <section class="main-section" id="Declaring_variables">
      <header>Declaring variables
        </header>
      <nav id="navbar">
        <header><a class="nav-link" href="Declaring_variables">Declaring variables</a></header>
      </nav>
      <p></p>
      <code></code>
      <p></p>
      <code></code>
      <p></p>
      <code></code>
      <p></p>
     </section>
    </main>
  </html>
/* file: styles.css */
@media (max-width: 600px) {
  * {
    width:300px
  }
}

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:

you have one link here but to make it work you need the # in front of the word Introduction in the href href="#Introduction" and it must match exactly the id of another element in your page.

(so somewhere below this point there should be an element of class type “main-section” whose id="Introduction". You should create a nav link for each main-section on your page)

As for the styling, that is up to you to decide. (you should think about what you would like to see and if you can’t make it happen, then look up css properties as required)

Thanks for the suggestion. could you please see the below code and advise how i should address the instruction (" Your #navbar should have exactly one header element within it.") i ended up with error on? i used the # reference in this code.

<section class="main-section" id="Hello_world">
      <header>Hello world
        </header>
      <nav id="navbar">
        <header><a class="nav-link" href="#Hello_world">Hello world</a></header>
      </nav>
      <p></p>
      <code>function greetMe(yourName) { alert("Hello " + yourName); }
      </code>
      <code>greetMe("World");</code>
      <p></p>
     </section>

I’ve edited your code for readability. When you 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 (').

i think you need to understand what a navbar is.
The navbar is the menu or the navigation menu.
It is the thing you see in most websites at the top of the page and lets you view the contents of the page.

For eg. the fCC forum here has a navbar at the top which has the link to “Visit the Curriculum” and some other stuff like your profile image, search icon etc.

Therefore, the navbar should not be inside the section it is linking to.
It should be above it.
Re-organize the code so that the nav element is above the main part of the page.

Understood, thanks! i will try this

1 Like

just so I am not giving incomplete info: the navbar can also be below the main part of your page too. It just depends on the layout and what you are trying to achieve.

Its taking time for me…appreciate any and all support. my code still doesn’t seem to pass all the requirements of this project test. newbie feels :I …is answer code available someplace so I could check what exactly my code is missing? the order of nesting. my new code or “i think it is code” is-

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

There is no solution code as this project is part of the certification.
Do you mind posting everything and not just part of the code?

oh. here it is. i re-organised the code as follows-

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <link rel="stylesheet" href="styles.css"/>
   <title>JS Documentation</title>
   </head>
  <main id="main-doc">
    <nav id="navbar">
      <header><a class="nav-link" href="#Introduction">Introduction</a>
        </header>
        </nav>
     <section class="main-section" id="Introduction">
       <header>Introduction</header>             
      <p></p>
      <p></p>
       <li></li>
       <li></li>
      </section>
    <nav id="navbar">
      <header><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></header>
    </nav>
    <section class="main-section" id="What_you_should_already_know">
      <header>What you should already know</header>      
      <p></p>
      <li></li>
      <li></li>
      <li></li>
     </section>
     <nav id="navbar">
       <header><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></header>
     </nav>
     <section class="main-section" id="JavaScript_and_Java">
       <header>JavaScript and Java</header>           
       <p></p>
       <p></p>
       <p></p>
      </section>
     <nav id="navbar">
       <header><a class="nav-link" href="#Hello_world">Hello world</a></header>
     </nav>
     <section class="main-section" id="Hello_world">
       <header>Hello world</header>      
       <p></p>
       <code>function greetMe(yourName) { alert("Hello " + yourName); }
       </code>
       <code>greetMe("World");</code>
       <p></p>
      </section>
     <nav id="navbar">
       <header><a class="nav-link" href="#Variables">Variables</a></header>
     </nav>
     <section class="main-section" id="Variables">
      <header>Variables</header>
      <p><p>
      </section>
      <nav id="navbar">
        <header><a class="nav-link" href="#Declaring_variables">Declaring variables</a></header>
      </nav>
     <section class="main-section" id="Declaring_variables">
       <header>Declaring variables</header>
      <p></p>
      <code></code>
      <p></p>
      <code></code>
      <p></p>
      <code></code>
      <p></p>
      </section>
    </main>
  </html>

it seems the code has a few issues right now that should be fixed.
(duplicate navbar id for one)

Paste the code into this online html validator and read through the list of errors shown.
Try to fix as many as possible. You can let us know if you are struggling to fix an error that is being reported to you.