Various issues with headers and navbar

Code Feedback
1

I’m working on the Responsive Web Design Project #4 - Build a Technical Documentation Page. Below are the following use cases that fail, according to CodePen:

  • Each element with the class of “main-section” should also have an id that corresponds with the text of each contained within it. Any spaces should be replaced with underscores (e.g. The that contains the header “Javascript and Java” should have a corresponding id=“Javascript_and_Java”). (Content, #4)
  • Additionally, the navbar should contain link () elements with the class of “nav-link”. There should be one for every element with the class “main-section”. (Content, #10)
  • 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”). (Content, #12)
  • 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 . (Content, #13)
  • On regular sized devices (laptops, desktops), 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. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content. (Layout, #1)

I don’t know why CodePen says I’m failing on these. My code appears to pass these use cases. My code snippets are below, and the preview for my CodePen project appears to work as expected (please fork my project to get my full code files and the CodePen preview):

  • Content, #4
<section class="main-section" id="Objects">
    <header>
      <h1>Objects</h1>

<section class="main-section" id="Classes">
    <header>
      <h1>Classes</h1>

<section class="main-section" id="Variables">
    <header>
      <h1>Variables</h1>

<section class="main-section" id="Constants">
    <header>
      <h1>Constants</h1>

<section class="main-section" id="Primitive_Types">
    <header>
      <h1>Primitive Types</h1>
  • Content, #10; Content, #12; and Content, #13
<nav id="navbar">
    <header>
      Major Java Elements
    </header>
    <ul>
      <li class="nav-link"><a href="#Objects">Objects</a></li>
      <li class="nav-link"><a href="#Classes">Classes</a></li>
      <li class="nav-link"><a href="#Variables">Variables</a></li>
      <li class="nav-link"><a href="#Constants">Constants</a></li>
      <li class="nav-link"><a href="#Primitive_Types">Primitive Types</a></li>
    </ul>
  </nav>
  • Layout, #1
@media (min-width: 992px) {
  #navbar {
    position: fixed;
    top: 0;
    background-color: white;
    width: 100%;
  }
  
  #main-doc {
    padding-top: 130px;
  }
}

Thanks so much!

2
  1. In sections, you’ve included the entire text in header tag instead of just the titles. That’s why the tests are failing to match the IDs with the headers’ text contents.
  2. You added the nav-link class to list items instead of links.

I skipped the rest because it seems you haven’t you haven’t really double checked your code against the errors, no offense. If you’ve been sitting on this project for a while, it will be much easier to fix after a couple of hours break.

1 Like
3

Thanks so much @Gigusek. You’re right about the two points you made. I’m not getting errors for those use cases anymore.

Don’t know how I overlooked some of those minute details. Will pay closer attention in the future.

I’ll let you know how it goes with use case Layout, #1:

On regular sized devices (laptops, desktops), 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. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.

And hey, no offense taken. I’d much rather get the blunt truth. Much easier to move on that way. Keep it coming!

1 Like
4

Christ dude. So as for use case Layout #1, my CSS code for #navbar was

#navbar {
    position: fixed;
    top: 0;
    background-color: white;
    width: 100%;
  }

It turns out with that width needed to be max-width. That made my code pass the test. I just tried it out of the blue. Wasn’t even thinking. Maybe a break from it was all I needed, as you suggested @Gigusek.

Thanks again for replying to me, and do not worry about offending me. Very hard to do that, especially online. So please give me the blunt honest truth. I’d wish more people in my life would do that.

Until next time,

1 Like
5

I’m glad my advice helped!

And don’t worry about missing those seemingly easy-to-spot details, it happens to us all the time. In most cases, the longer we stare/sit at something the less receptive we get to the little details. Our brains need some time to recharge and handle all the data we’ve ingested.

I’ve actually learned some of these things and in Coursera’s course called “Learning How To Learn”, about how our brains react to information, about memory, how to learn more effectively, how breaks help us etc. pretty interesting stuff!
I took it a while back and recently realized that using these concepts is continuously helping me learn programming more effectively. So, while completely off-topic, I’ll take a chance to recommend it here (it’s easy digestible and completely free), feel free to check it out if you’re interested :stuck_out_tongue:

2 Likes