Error Submitting Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Hi,

I was trying to do the Technical Documentation Page, I was only making the structure of the page with some text, following the questions to make it working as it should do.

When I try executing the code it gives me two errors that I don’t know how to fix:

None of your header elements should be empty.

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

In my code all header elements are not empty and they are correctly linked to .nav-link elements as requested.
These are the only errors displayed when I execute the code, all other requests are working.

Hope someone can help me fixing the code.

This is my code

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Documentation Page</title>
  </head>
  <body>
    <main id="main-doc">
      <nav id="navbar">
        <header>Docs</header>
        <ul>
          <li><a class="nav-link" href="#javascript">javascript</a></li>
          <li><a class="nav-link" href="#java">java</a></li>
          <li><a class="nav-link" href="#html_css">html css</a></li>
          <li><a class="nav-link" href="#php">php</a></li>
          <li><a class="nav-link" href="#android">android</a></li>
        </ul>
      </nav>
      <section class="main-section" id="javascript">
        <header>javascript</header>
        <p>first p in <code>javascript</code></p>
        <p>second p in javascript</p>
      </section>
      <section class="main-section" id="java">
        <header>java</header>
        <p>first p in <code>java</code></p>
        <p>first p in java</p>
      </section>
      <section id="html_css" class="main-section">
        <header>html css</header>
        <p>first p in <code>html css</code></p>
        <p>first p in html css</p>
        <ul>
          <li>first li</li>
          <li>second li</li>
          <li>third li</li>
          <li>fourth li</li>
          <li>fifth li</li>
        </ul>
      </section>
      <section id="php" class="main-section">
        <header>php</header>
        <p>first p in <code>php</code></p>
        <p>first p in php</p>
      </section>
      <section id="android" class="main-section">
        <header>android</header>
        <p>first p in <code>android</code></p>
        <p>first p in android</p>
      </section>
    </main>
  </body>
</html>

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Post your html and css code together

  • where is the media query?
  • the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. Yours is not always visible!
3

This is the css, but the problem when I execute the code is that it tells me that I have some header tags empty, instead they are all filled with text and their id are formatted as requested.
I don’t have issues with css because all requests about it pass the test, I have only two errors that are the ones I posted on the previous post

@media (max-width: 960px) {
  #navbar {
    visibility: hidden;
    width: 0px;
  }
}

#navbar {
  float: left;
  height: 100%;
  width: 100px;
  padding-right: 20px;
  margin-right: 5%;
}

#navbar ul {
  list-style-type: none;
  width: 100%;
}

#navbar ul li:not(first-of-type) {
  margin-top: 10px;
}

.main-section {
  text-align: left;
}
4

Media queries should be at the end of the CSS file.

1 Like
5

Next time, post the entire code. Without the css file, the fCC test suite showed that you have to show the navbar on the left. Now your work has passed:

image
image1329×821 41.2 KB

although I must admit that I don’t understand what you want to accomplish with web page design like this one. You may pass the challenge but in the end, your work will be available to anyone publicly. What is your opinion people will think of your approach to work that has been done this way?

6

To be fair, I complete challenges by first passing all of the user stories, then filling out content and styling. Perhaps this isn’t the finished product?

7

I was making all the quests before adding more text and doing better css styling like the one in the example.
I’m trying to submit the code but it continues showing me the two errors I posted previously.
It gives me those two errors only in the certification page and not in the fCC test suite.