Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

I’m struggling with no. 19 and 20 on this particular challenge.

1 9. 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”).

  1. Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).
    I have tried a lot of research, as well as triple checking all of my capitalization and spacing. Does anyone have any insight on where I’m going wrong on steps 19 & 20?

It also keeps telling me that I need 6 .main-sections despite the minimum being 5 and my doc only having 5 .nav-links. I don’t know where I’m going wrong.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <html>

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="styles.css">
    </head>

    <main id="main-doc"> 
       <h1 id="title">HTML Application Check</h1>
       <!----------NavBar------------->
       <nav id="navbar">
         <header>This page will cover some very basic HTML concepts.</header>
       <nav> <a class="nav-link" href="#What_is_HTML?">What is HTML?</a></nav>
       <nav><a class="nav-link" href="#Using_Tags">Using Tags</a>
       </nav>
       <nav><a class="nav-link" href="#CSS_Design">CSS Design</a></nav>
       <nav ><a class="nav-link" href="#Now_What?">Now What?</a></nav>
       <nav><a class="nav-link" href="#Your_Thoughts">Your Thoughts</a></nav>
       </nav>
<!------Section 1------>
<section class="main-section" id="What_is_HTML?">
  <header>
  <h2 id="title">What is HTML?</h2>
  </header>
  <p>Html is a coding language that is broadly used to design webpages and other electronic communications. While it is widely seen as an entry-level coding language, it is still a powerful tool that anyone can use.</p>
</section>
<!------Section 2------>
      <section class="main-section" id="Using_Tags">
        <header>
        <h2 id="title" class="sub-header">Using Tags</h2>
        </header>
      <p><code class="emphasis">Tags</code> utilize the "<" and ">" symbols to begin and close an <a class="sources" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">HTML</a> element. By sandiwching a tag between the two symbols (i.e."< _____ >"), you can open an element's tag and call its function.</p>
      <p>Most elements require a closing indicator, so that the console will know when to end its function. To close an element's tag, utilize the back-slash or "/" symbol at the start of a closing tag's brackets. (i.e. " < /_____ >")
      <p>There will be some elements who do not require a closing tag. These are known as "void" elements.</p>
      <h3 id="title" class="sub-header">Some common <a class="sources" href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void elements</a> would be:</h3>
      <ul>
        <li>"img"</li>
        <li>"meta"</li>
        <li>"input"</li>
      </ul>
      </section>
<!--------Section 3------->
      <section class="main-section" id="CSS_Design">
        <header>
          <h2 id="title" class="sub-header">CSS Design</h2>
          </header>
        <p>Each of your elements can be styled by using <a class="sources" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics">CSS</a> or <code class="emphasis">"Cascading Style Sheets."</code> You can add CSS design and formatting to elements by adding different identifiers to your elements in their opening tags.</p>
        <p>Some of these identifiers include things like "class" or "id". These are useful for targeting multiple elements that are similiar in purpose. You can target your different elements and their identifiers by using <code class="emphasis">"selectors"</code>.</p>
<p>Once you've called an element, or groups of like-elements using your selectors, you can add and adjust different <code class="emphasis">properties</code> by sandiwching their <code class="emphasis">parameters</code> between the "{ }" symbols.</p>
<h3>Some common parameters would be:</h3>
<ul>
  <li>color/background-color</li>
  <li>font-style</li>
  <li>display</li>
</ul>
        </section>
<!------Section 4------>
      <section class="main-section" id="Now_What?">
      <header> 
         <h2 class="sub-header">Now What?</h2>
         </header>
        <p>Well, that's kind of up to you! The amazing thing about HTML is its accesibility. Now you have the power of computer programming at your fingertips! </p>
        <p>Perhaps you'll use it to design the next great resource for information! Or maybe, you'll build a heartwarming database of cute animals.</p>
      </section>
<!------Section 5------>
      <section classs="main-section" id="Your_Thoughts">
        <header>
    <h2 class="sub-header">Your Thoughts</h2>
    </header>
    <form action="./submit_page" method="get">
      <input for="radio_feedback" id="survey" class="user_input" type="radio" name="survey" required>This was well done.
      <input for="radio_feedback"id="survey" class="user_input" type="radio" name="survey" required>There is much room to grow.
      <textarea class="feedback" rows="3" cols="50" placeholder="Let us know in detail how we did! (:"></textarea>
      <button target="_blank" id="form_submit" type="submit">Submit</button>
      </form>
      </section>
<!------Section 6------>
      <section class="main-section" id="Thank_you_for_perusing_my_hard_work!">
     <header>
       <h2>Thank you for perusing my hard work!</h2>
     </header>
     <p>I have appreciated your time and energy!</p>
        </section>
    </main>
  </html>
* {
  background-color: #c9d2fc;
}

.sources{
  color: blue;
}
.sources:hover{
  color: #3b3b
}
#navbar {
  display: flex-box;
  justify-content: left;
}

.feedback {
  background-color: white;
}
#survey {
  display: inline;
}
#form_submit {
  display: flex;
  justify-content: center;
  background-color: pink;
  border-color: green;
}
.emphasis {
  font-weight: bold;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

you just need one nav element with all the links inside it

1 Like

I took out the excess nav elements, replacing them with uo and li elements, but 19 & 20 still show as errors. Any other thoughts?

Hi there @pkjgpm99rn . You aren’t have text in header element for each section.

You are using h2 element for text.

1 Like

I suggest you format your document, it makes code easier to read.
You can right click in the editor and choose “Format Document”

Looking at your code you may notice you have two opening <html> tags when you need only one.

You are also missing the body element.

You could also pass your HTML code through a validator: Ready to check - Nu Html Checker

You have various issues that need fixing.

For your query, you need to take a look at the header vs nav-link combo with text of THANK YOU FOR PERUSING MY HARD WORK!

1 Like

Okay! Thank you for this, as adding the body element (for whatever reason) solved 19 & 20. Also, did not know about the “Format Doc” function, so nifty!

HOWEVER now no.17 “You should have the same number of .nav-link and .main-section elements.” now comes back with an error??? Any further insights? Should I post the updated (and formatted :P) code in a reply? I’m pretty new here so I don’t want to commit any faux pas.

Yes, absolutely. Always need to know he current state.

Thank you for that clarification! I have the code pasted below:

<!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>

<main id="main-doc">
  <h1 id="title">HTML Application Check</h1>
  <!----------NavBar------------->
  <nav id="navbar">
    <header>This page will cover some very basic HTML concepts.</header>
    <uo>
      <li> <a class="nav-link" href="#What_Is_HTML?">What is HTML?</a></li>
      <li><a class="nav-link" href="#Using_Tags">Using Tags</a>
      </li>
      <li><a class="nav-link" href="#CSS_Design">CSS Design</a></li>
      <li><a class="nav-link" href="#Now_What?">Now What?</a></li>
      <li><a class="nav-link" href="#Your_Thoughts">Your Thoughts</a></li>
      <li><a class="nav-link" href="#Pop_Quiz">Pop Quiz</a></li>
    </uo>
  </nav>

  <body>
    <!------Section 1------>
    <section class="main-section" id="What_Is_HTML?">
      <header>
        <h2 id="title">What is HTML?</h2>
      </header>
      <p>Html is a coding language that is broadly used to design webpages and other electronic communications. While it
        is widely seen as an entry-level coding language, it is still a powerful tool that anyone can use.</p>
    </section>
    <!------Section 2------>
    <section class="main-section" id="Using_Tags">
      <header>
        <h2 id="title" class="sub-header">Using Tags</h2>
      </header>
      <p><code class="emphasis">Tags</code> utilize the "<" and ">" symbols to begin and close an <a class="sources"
          href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">
          HTML</a> element. By sandiwching a tag between the two symbols (i.e."< _____>"), you can open an element's tag
            and call its function.</p>
      <p>Most elements require a closing indicator, so that the console will know when to end its function. To close an
        element's tag, utilize the back-slash or "/" symbol at the start of a closing tag's brackets. (i.e. " < /_____>
          ")
          <p>There will be some elements who do not require a closing tag. These are known as "void" elements.</p>
          <h3 id="title" class="sub-header">Some common <a class="sources"
              href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void elements</a> would be:</h3>
          <ul>
            <li>"img"</li>
            <li>"meta"</li>
            <li>"input"</li>
          </ul>
    </section>
    <!--------Section 3------->
    <section class="main-section" id="CSS_Design">
      <header>
        <h2 id="title" class="sub-header">CSS Design</h2>
      </header>
      <p>Each of your elements can be styled by using <a class="sources"
          href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics">CSS</a> or
        <code class="emphasis">"Cascading Style Sheets."</code> You can add CSS design and formatting to elements by
        adding different identifiers to your elements in their opening tags.
      </p>
      <p>Some of these identifiers include things like "class" or "id". These are useful for targeting multiple elements
        that are similiar in purpose. You can target your different elements and their identifiers by using
        <code class="emphasis">"selectors"</code>.
      </p>
      <p>Once you've called an element, or groups of like-elements using your selectors, you can add and adjust
        different
        <code class="emphasis">properties</code> by sandiwching their <code class="emphasis">parameters</code> between
        the
        "{ }" symbols.
      </p>
      <h3>Some common parameters would be:</h3>
      <ul>
        <li>color/background-color</li>
        <li>font-style</li>
        <li>display</li>
      </ul>
    </section>
    <!------Section 4------>
    <section class="main-section" id="Now_What?">
      <header>
        <h2 class="sub-header">Now What?</h2>
      </header>
      <p>Well, that's kind of up to you! The amazing thing about HTML is its accesibility. Now you have the power of
        computer programming at your fingertips! </p>
      <p>Perhaps you'll use it to design the next great resource for information! Or maybe, you'll build a heartwarming
        database of cute animals.</p>
    </section>
    <!------Section 5------>
    <section classs="main-section" id="Your_Thoughts">
      <header>
        <h2 class="sub-header">Your Thoughts</h2>
        <p>I am new to this, and value your feedback. Cheers!</p>
      </header>
      <form action="./submit_page" method="get">
        <input for="radio_feedback" id="survey" class="user_input" type="radio" name="survey" required>This was well done.
        <input for="radio_feedback"id="survey" class="user_input" type="radio" name="survey" required>There is much room to grow.
        <textarea class="feedback" rows="3" cols="50" placeholder="Let us know in detail how we did! (:"></textarea>
        <button target="_blank" id="form_submit" type="submit">Submit</button>
      </form>
    </section>
    <!------Section 6------>
    <section class="main-section" id="Pop_Quiz">
      <header>
        <h2>Pop Quiz</h2>
      </header>
      <p>I'm just kidding, this is for you to take up and try, or not! Isn't that the joy of learning?</p>
    </section>
  </body>
  <footer id="Thank_you_for_perusing_my_hard_work!">
    <header>
      <h2>Thank you for perusing my hard work!</h2>
    </header>
    <p>I have appreciated your time and energy!</p>
  </footer>
</main>


</html>


</html>

Hi @pkjgpm99rn

You have an attribute typo.

id attribute values need to be unique.

The parent element for the lists is not valid.

Happy coding

use again the HTML validator

While I appreciate the HTML validator, I am new to coding. It does not really help me understand what is wrong with the code, which is why I turned to the community. As I understand it, this is supposed to be a communal experience where the more seasoned coders help the younger ones learn, no? I will keep using the validator until the interface makes more sense, but a long list of errors and jargon I don’t understand isn’t helping me learn.

It will be useful to learn to use the validator so you might as well do it. Otherwise you are asking the people here to do the work of an automated tool instead of learning to do it yourself, and you should be learning.

Which one are you using? Some are more clear than others.

If you have questions about the results of the validator then ask here.

This is exactly what will help you learn. If there’s something you don’t understand, search for it or ask here. Eventually you will understand it all.