Build a Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

Everything works except for Failed: 16. All of your .nav-link elements should be in the #navbar.
Failed: 17. You should have the same number of .nav-link and .main-section elements.

As far as I can tell, I have done what it is asking for. Clicking on the links takes you to the proper place in the page. I have as many links as sections and the id’s match the links.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Technical Documentation Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
<main id="main-doc">
  <nav id="navbar"><header>Navbar</header>
    <ul>
      <li><a href="#abc" class="nav-link">ABC</li>
      <li><a href="#def" class="nav-link">DEF</li>
      <li><a href="#ghi" class="nav-link">GHI</li>
      <li><a href="#jkl" class="nav-link">JKL</li>
      <li><a href="#mno" class="nav-link">MNO</li>
    </ul>
  </nav>
  <body>
    <section class="main-section" id="abc" <a href="abc"><header>ABC</header>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    </section>
    <section class="main-section" id="def"><header>DEF</header>
     <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    </section>
    <section class="main-section" id="ghi"><header>GHI</header>
     <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    </section>
    <section class="main-section" id="jkl"><header>JKL</header>
     <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    </section>
    <section class="main-section" id="mno"><header>MNO</header>
     <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <code></code>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    </section>
  </body>
</main>
</html>

/* file: styles.css */
@media print {
  }

Your browser information:

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

Challenge Information:

Build a Technical Documentation Page - Build a Technical Documentation Page

2

Please review the lecture about the importance of using an HTML boilerplate to start your projects and pay close attention to where the body element should be in the structure:

Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.

Did this instruction ask you to put your links in an unordered list? Please don’t add anything not asked. The tests are exacting.

And carefully review your code to make sure all HTML elements are complete (have both an opening and closing tag, if required).

4

Hello @bkarlan !

You are doing good.

Being this is our personal projects, you can include any elements - as long as they are applied with correct syntax.

Your ul are fine. I tried my own to check if it made any difference as I have ol but it made no difference.

Some of the issues appear to be with the body opening tag moving from directly below the head element.

This is why it is not passing step 17.
Some of the a are missing something to create the anchor to the text.
example: <a href=#someurl>Text</a>

As well, the main closing tag appears to have moved outside the body closing tag.

I love that you are setting your template before setting the content to it.

To be honest, that is how I work on my projects, too.

However, I will admit to not being as ambitious as you are, @bkarlan!

I barely went beyond the total requirements. This is the most difficult one for me.

Keep up the good progress!:slightly_smiling_face:

5

I agree with @StaySilent that the unordered list wrapping your links is not what is breaking your code. :slightly_smiling_face:

6

Thank you, however, if you’ll notice, no where in that page does the html have both a main and a body. I’m assuming the main holds the body, which is the assumption I made on this test.

7

BTW, I have tried to put the <body> outside the <main> instead of being contained by it. I’ve deleted the <body> as no where in the requirements does it state that you must have a <body>. I’ve also tried moving the <body> up to the top and before the main both opening and closing tags, but that didn’t work either.

8

have you tried adding the missing part of your a elements?

you can pass your code in an html validator Ready to check - Nu Html Checker

9

Thank you, I realized I wasn’t closing the <a> tag properly

10

You wouldn’t have to assume if you reference the HTML boilerplate provided in the link.

11

All web pages should contain a body element. Again, refer to the HTML boilerplate example.

1 Like