Build a Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

This is the only code i cannot get to pass. I dont see whats wrong, I tried moving the ids, giving them different names, etc. I know the code is minimalistic, I focus on passing the tests and then making it unique. This is the failing test:
20. 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).

Any help?

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>

  <body>
    <main id="main-doc">
      <section class="main-section" id="part_1">
        <header>part 1</header>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <code>part-1-code</code>
      </section>
      <br/>
      <section class="main-section" id="part_2">
        <header>part 2</header>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <code>part-2-code</code>
      </section>
      <br/>
      <section class="main-section" id="part_3">
        <header>part 3</header>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <code>part-3-code</code>
      </section>
      <br/>
      <section class="main-section" id="part_4">
        <header>part 4</header>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <code>part-4-code</code>
      </section>
      <br/>
      <section class="main-section" id="part_5">
        <header>part 5</header>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <p>Lorem ipsum dolor sit amet. Vel molestiae iusto est nemo perferendis et doloremque voluptatem est facilis dignissimos. Sed vitae nobis sed rerum officia vel quaerat iusto.

Ut ducimus earum non voluptas voluptatem sit eaque excepturi rem doloremque libero et tenetur velit aut magni voluptatum. Qui aliquam aperiam ex distinctio quisquam ex ullam quos est mollitia pariatur est totam laborum.</p>
        <ol type="i">
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
          <li>item 4</li>
          <li>item 5</li>
        </ol>
        <code>part-5-code</code>
        <br/>
        <br/>
        <br/>
      </section>
      <nav id="navbar">
        <header id="header">Lorem Ipsum</header>
        <a class="nav-link" href="part_1">part 1</a>
        <a class="nav-link" href="part_2">part 2</a>
        <a class="nav-link" href="part_3">part 3</a>
        <a class="nav-link" href="part_4">part 4</a>
        <a class="nav-link" href="part_5">part 5</a>
      </nav>
    </main>
  </body>
</html>

/* file: styles.css */
@media only screen and (max-width: 640px;){
  #navbar {
    position: absolute;
    left: 0;
  }
}

#navbar {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Build a Technical Documentation Page - Build a Technical Documentation Page

2 Likes
2

Is there anything missing from your href

3

not that ive seen, i threw it in an html checker and nothing comes up for the href, a couple syntax errors but the code still works so im not messing with them lmao

4

if you want to link to an element using the ID there is something missing

how do you select an element using the ID?

6

Please open your own thread

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

7

Here is an example from MDN on how to link to an element on your web page:

<h2 id="browser_compatibility">
  <a href="#browser_compatibility">Browser compatibility</a>
</h2>
8

I was missing hashtags!!! thank you it passed!!