Technical Documentation Page project

HTML-CSS
1

Hi, I’m asking for help on the Technical Documentation Page project. On the tests, this error keeps coming up for me:

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’d be so grateful if someone could help me. This is my code so far:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>THIS IS A PAGE</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav id="navbar">
    <header>Technical Documentation</header>
    <ul>
      <li><a class="nav-link" href="#Introduction">Introduction</a></li>
      <li><a class="nav-link" href="#Beginnings">Beginnings</a></li>
      <li><a class="nav-link" href="#Middle_Section">Middle Section</a></li>
      <li><a class="nav-link" href="#Other_Remarks">Other Remarks</a></li>
      <li><a class="nav-link" href="#Conclusions">Conclusions</a></li>
    </ul>
  </nav>
  <main id="main-doc">
    <section class="main-section" id="Introduction">
  <header>Introduction</header>
      <p>I have something to say.</p>
      <ul>
        <li>There is this.</li>
        <li>Then there is this.</li>
        <li>And also, there is this.</li>
        <li>Then we have another something.</li>
        <li>And something else that I can think of.</li>
      </ul>
    </section>
    <section class="main-section" id="Beginnings">
      <header>Beginnings</header>
      <p>There is also something to say in this section.</p>
      </section>
    <section class="main-section" id="Middle_Section">
    <header>Middle Section</header>
      <p>And i have more to say here.</p>
    </section>
    <section class="main-section" id="Other_Remarks">
      <header>Other Remarks</header>
      <p>This is what I have to say in this section about coding...</p>
      <pre><code>
        html {
          width: 100%;
        }
      </code></pre>
      <p>This also is some more CSS.</p>
      <pre><code>
          * {
            margin: 0;
            padding: 0;
          }
      </code></pre>
    </section>
    <section class="main-section" id="Conclusions">
      <header>Conclusions</header>
      <p>And finally, I also have lots to say here. You can write this in code:</p>
      <pre><code>
        p {
          background-color: rgb(132, 215, 23);
          color: rgb(97, 90, 255);
          font-style: italic;
        }
      </code></pre>
      <p>It is also possible to style whole classes at once.</p>
      <pre><code>
        .main-section {
          font-family: sans-serif;
        }
      </code></pre>
      <p>... or whole id groups.</p>
      <pre><code>
        #3 {
          border: 2px;
          border-style: solid;
        }
      </code></pre>
      <p>Then, there is the possibility to style several items at once.</p>
      <pre><code>
      li, p {
        color: Gold;
      }
      </code></pre>
      <p>If only targeting a specific sort of item from a group, this can be specified. Instead of this...</p>
      <pre><code>
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
        }
      </code></pre>
      <p>... you do this:</p>
      <pre><code>
        nav li {
          display: inline;
        }
      </code></pre>
      <p>This is not all. More later.</p>
    </section>
  </main>
</body>
</html>

Wishing a great day to everyone.

2

Maybe it means that the id you make reference to in your #navbar should be in the header tag itself instead of the section that header is in.
I guess it works fine as it is but to conclude the challenge you have to observe this “rule”.

3

Thanks so much for your remark! This hasn’t worked, unfortunately.

4

Post the entire html and css code.

5

Ok, see my CSS below.

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: silver;
  border: solid;
}

nav li {
  margin: 0.5em;
  border: thin solid;
  background-color: #f1f1f1;
}

nav a {
  display: block;
  width: 60px;
  color: #000;
  text-decoration: none;
}

nav a:hover {
  background-color: #555;
  color: White;
  text-decoration: underline;
}
#navbar {
  position: fixed;
  left: 0px;
  height: 100%;
  margin-top: -100px;
  z-index: 1;
}

header {
  background-color: silver;
  font-weight: bold;
  border: solid;
border-bottom: none;
}

@media (max-height: 250px) {
  nav ul {
  visibility: hidden;
}
}

main {
  margin-top: 100px;
}

html {
  scroll-behavior: smooth;
}
6

Your code has passed the test.

Copy all html and css code and paste it somewhere else. Restart test. Follow the note:
“Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.”

Then, paste the code back in, and test it.

7

Thank you so much for testing that out for me!!
I somehow still can’t make it work… For restarting the test, do I do anything other than deleting everything and saving it?
I tried in a different browser too, without any luck so far.

8

Go to codepen website and try there your complete code. In order to test it with freeCodeCamp test suite add the following code line to the HTML area:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

It is best to see for you that the code is working. You should save your entire code (HTML and CSS) before restarting the step! After that, paste the code back and test it again.

1 Like
9

Thank you so much for all the info you provided!
I ended up writing up something entirely new and that went through… more practise for me, I guess!

1 Like
10

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