Technical Documentation help needed!

Hello, everyone!!

I am just trying HTML/CSS for the first time. I did a little with a demo over on CodeCademy, tried a couple videos on Pluralsight, and ended up here. So far, I like this the best. I am working on my technical documentation page (and trying to make it relate to my career as middle school band director) and I am having trouble with the header requirements. I cannot seem to pass:

3. The first element within each .main-section should be a element which contains text that describes the topic of that section.

4. Each element with the class of “main-section” should also have an id comprised of the innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective innerText. (e.g. The that contains the header, “JavaScript & Java”, should have a corresponding id=“JavaScript_&_Java”).

12. Each element with the class of “nav-link” should contain text that corresponds to the text within each (e.g. if you have a “Hello world” section/header, your navbar should have an element which contains the text “Hello world”).

13. When I click on a navbar element, the page should navigate to the corresponding section of the “main-doc” element (e.g. If I click on a “nav-link” element that contains the text “Hello world”, the page navigates to a element that has that id and contains the corresponding .

Sidenote- my elements are simply to pass the requirement since they don’t really apply to what I chose as the topic…

I would really appreciate your help! Thank you!

https://codepen.io/matt-schucker/pen/GRpQvmK

Hi @crunchy409. Welcome to FCC. The technical documentation project requires you to pick a coding related technical topic to be able to pass the tests. You can check the example app Here.

Test 3

You are not closing the elements in the correct order. You need to close the <section> element before closing the <a> element

You have this:

<a id="Clarinet">
  <section class="main-section" id="Clarinet!">
</a>
  </section>

Should be this

<a id="Clarinet">
  <section class="main-section" id="Clarinet!">
  </section>
</a>

Also for the Trumpet section, you didn’t close on of the code elements correctly.

Test 12/13

The href need to match the section id and the anchor text needs to match the header text, including case.

For example for the first link/section you have:

<li><a class="nav-link" href="#Flute">Flute</a></li>

<section class="main-section" id="flute!">
  <header>Flute!</header>
</section>

Should be:

<li><a class="nav-link" href="#flute!">Flute!</a></li>

<section class="main-section" id="flute!">
  <header>Flute!</header>
</section>

The last test just needs a media query of your choosing.

It doesn’t have to be coding related.

It doesn’t have to be coding-related. I’ve seen people do baking recipes as their documentation page. It does require you to use <code> sections, but those can contain whatever you like in whatever style you like. Obviously there is an intended spirit to the challenge, but it’s always fun to see it subverted now and then. :peace_symbol:

Thank you lasjorg!! I really appreciate your help. I found a whole handful of

tags that I never closed as well- that was also getting in the way of completing the tests.

Question-
for the section id, the anchor text, and header text… do these always have to match or is it just to complete this specific freecodecamp test? I assume that it’s just to pass this test.

Thanks again!! I just need to figure out the media query and I’m good to go.

Another quick, unrelated question…

What am I doing that causes the header in the nav bar (Instruments!) to be centered in the black area, but the links to the different instruments are offset some to the right?

I couldn’t figure this one out for the life of me :slight_smile:
thank you!!!

The href must match the id on the element that it links (minus the # in the href value). The rest is just for the tests.

The <ul> has default left padding. You can just remove it.

#navbar ul {
  padding: 0;
}
1 Like

Worked perfectly! Thank you!!

I am working with the media query currently and I would like the nav bar to change from vertical to horizontal as the screen size gets smaller. When I put this into an editor like “tryit” on w3schools, it works correctly. When I look at the preview page through codepen.io it stacks the links vertically at the top instead of putting them inline. Which website is rendering my code correctly?

updated code: https://codepen.io/matt-schucker/pen/GRpQvmK

thank you…

I would trust Codepen more. Or better yet, do local development using VS Code and an extension like Live Server.

I don’t suggest using floats for this, or much of anything for that matter other than floating text around elements. We have much better layout methods now with flexbox and CSS grid. But just to cover it anyway here is one way you might do it.

  1. In the media query set text-align: center on the #navbar

  2. Float the li, not the links

  3. Set the ul to be inline-block

@media screen and (max-width: 700px) {
  #navbar {
    width: 100%;
    height: auto;
    text-align: center;
  }
  #main-div {
    margin-left: 0%;
    padding-left: 2em;
  }
  #navbar li {
    display: block;
    float: left;
  }
  #navbar ul {
    display: inline-block;
  }
}

With flexbox, you just set the ul to be a flex container, center the content, and let the child elements wrap.

@media screen and (max-width: 700px) {
  #navbar {
    width: 100%;
    height: auto;
  }
  #main-div {
    margin-left: 0%;
    padding-left: 2em;
  }
  #navbar ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

BTW, you have list-style-type: none on #navbar, it should be set on the ul instead.

1 Like

Outstanding.

Thank you so much for your help with these items. I will definitely begin studying the flexbox way of doing things. I definitely enjoy the VS code environment better- maybe I’ll start there and copy them over to codepen when I’m done.

Thanks again!