Build a Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

This is the only test that’s not passing.
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).

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">
      <nav id="navbar">
        <header id="head" align="left">Navigate</header>
<a class="nav-link" href="section_1">Section 1</a>
<a class="nav-link" href="section_2">Section 2</a>
<a class="nav-link" href="section_3">Section 3</a>
<a class="nav-link" href="section_4">Section 4</a>
<a class="nav-link" href="section_5">Section 5</a>
        </nav>        
      <section class="main-section" id="section_1">
        <header>Section 1</header>
        <p></p>
        <p><code></code></p>
        <li></li>
      </section>
      <section class="main-section" id="section_2">
        <header>Section 2</header>
        <p></p>
        <p><code></code></p>
        <li></li>
      </section>
      <section class="main-section" id="section_3">
        <header>Section 3</header>
        <p></p>
        <p><code></code></p>
        <li></li>
      </section>
      <section class="main-section" id="section_4">
        <header>Section 4</header>
        <p></p>
        <p><code></code></p>
        <li></li>
      </section>
      <section class="main-section" id="section_5">
        <header>Section 5</header>
        <p></p>
        <p><code></code></p><li></li>
      </section>
    </main>    
  </body>
</html>

/* file: styles.css */
.nav-bar {
  float: left;
}
@media screen and (orientation: landscape) {
back-ground: purple;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0

Challenge Information:

Build a Technical Documentation Page - Build a Technical Documentation Page

2

Two things. One, do you see a red swiggly line in your CSS? That’s a sign that there’s something wrong with that part of your CSS.

Next are you familiar with how ids are represented? There’s a special symbol that links need to know that the given value is a id rather than some sort of page.

3

Hi. Thanks so much. This is what I have now, but am getting the same error.

#nav-bar {
  float: left;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1.7rem;
  }
}
4

Have you touched the href attributes of your links? And what of your research of how ids are represented?

5

Thanks. I know ids need the # and I still can’t find anything wrong with my hrefs.

6

Got it! I have no recollection of using # in hrefs. :pensive_face:

7

You did, in many places already

Here where it is introduced for the first time: https://www.freecodecamp.org/learn/full-stack-developer/workshop-blog-page/step-9

8

Thanks. I will check that out again.