Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
The Problem:

  • 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”).

I’m kinda desperate here, but I see no way to complete this project. I have matched the text in the anchor tag in nav-links class exactly like the text in the header for each corresponding section in the main tag. I have tried my code, and each hyperlink of the sidebar menu is linked perfectly with each section. What did I do wrong?

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<body>
    <section class="header">
      <nav class="links"  id="navbar" >
        <header class="title">JS Documentation</header>
        <ul>
          <div class="divider"></div>
          <li><a href="#Introduction" class="nav-link">Introduction</a></li>
          <div class="divider"></div>
          <li><a href="#What_you_should_already_know" class="nav-link">What you should already know</a></li>
          <div class="divider"></div>
          <li><a href="#JavaScript_and_Java" class="nav-link">JavaScript and Java</a></li>
          <div class="divider"></div>
          <li><a href="#Hello_world" class="nav-link">Hello world</a></li>
          <div class="divider"></div>
          <li><a href="#Variables" class="nav-link">Variables</a></li>
          <div class="divider"></div>
          <li><a href="#Declaring_variables" class="nav-link">Declaring variables</a></li>
          <div class="divider"></div>
          <li><a href="#Variable_scope" class="nav-link">Variable scope</a></li>
          <div class="divider"></div>
          <li><a href="#Global_variables" class="nav-link">Global variables</a></li>
          <div class="divider"></div>
          <li><a href="#Constants" class="nav-link">Constants</a></li>
          <div class="divider"></div>
          <li><a href="#Data_types" class="nav-link">Data types</a></li>
          <div class="divider"></div>
          <li><a href="#if...else_statement" class="nav-link">if...else statement</a></li>
          <div class="divider"></div>
          <li><a href="#while_statement" class="nav-link">while statement</a></li>
          <div class="divider"></div>
          <li><a href="#Function_declarations" class="nav-link">Fuction declarations</a></li>
          <div class="divider"></div>
          <li><a href="#Reference" class="nav-link">Reference</a></li>
        </ul>
      </nav>
    </section>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
      </section>
      <section class="main-section" id="What_you_should_already_know">
        <header>What you should already know</header>
      </section>
      <section class="main-section" id="JavaScript_and_Java">
        <header>JavaScript and Java</header>
      </section>
      <section class="main-section" id="Hello_world">
        <header>Hello world</header>
      </section>
      <section class="main-section" id="Variables">
        <header>Variables</header>
      </section>
      <section class="main-section" id="Declaring_variables">
        <header>Declaring variables</header>
      </section>
      <section class="main-section" id="Variable_scope">
        <header>Variable scope</header>
      </section>
      <section class="main-section" id="Global_variables">
        <header>Global variables</header>
      </section>
      <section class="main-section" id="Constants">
        <header>Constants</header>
      </section>
      <section class="main-section" id="Data_types">
        <header>Data types</header>
      </section>
      <section class="main-section"  id="if...else_statement">
        <header>if...else statement</header>
      </section>
      <section class="main-section" id="while_statement">
        <header>while statement</header>
      </section>
      <section class="main-section" id="Function_declarations">
        <header>Function declarations</header>
      </section>
      <section class="main-section" id="Reference">
        <header>Reference</header>
      </section>
    </main>
  </body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

This is my first time posting, so pardon me if I made mistake not putting text into my post :smiley:

Hello and welcome to FCC Forum, a community of people helping each other!

Could you please tell us what error messages you are receiving for your code?
This will allow quick and proper guidance to assist you.

Happy coding! :slight_smile:

Hello. All 21 out of 22 of my test condition is correct. The only condition that isn’t satisfied said:

Which leaves me confused as I think I have fulfilled the requirement?

Hello!

Here is an example, that I hope will help you.
< nav id=“nav-bar”>
< ul>
< li>< a href=“#puppy_paws” class=“nav-link”>Puppy Paws< /a>< /li>
< li>< a href=“#kitten_kisses” class=“nav-link”>Kitten Kisses< /a>< /li>
< li>< a href=“#turtle_treasures” class=“nav-link”>Turtle Treasures< /a>< /li>
< li>< a href=“#bird_blessings” class=“nav-link”>Bird Blessings< /a>< /li>
< /ul>
< /nav>

< section>Pets
< header id="puppy_paws”>Puppy Paws < /header>
< p> Text for this header < /p>
< header id="kitten_kisses”>Kitten Kisses < /header>
< p> Text for this header < /p>
< header id=“turtle_treasures””>Turtle Treasures < /header>
< p> Text for this header < /p>
< header id=“bird_blessings”>Bird Blessings < /header>
< p> Text for this header < /p>
< /section>

Hope this helps you understand the connection between the nav-links and the headers.

Happy coding! :slight_smile:

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