Defining IDs in Product Landing Page challenge

HTML-CSS
#1

So, I get that the spec requires you to have an ID =“nav-bar” in a element. I did that. I have noticed that in the example provided by FreeCodeCamp, they did not define #navbar anywhere in CSS. So I tried this as well.
When I run the tests I get the fault message “#nav-bar not defined”, which seems fair enough. But running the tests on their example code does not give this message, in fact it gives a ‘pass’. Here is their example code: https://codepen.io/freeCodeCamp/pen/RKRbwL

Does this not seem weird? Am I missing something? To me it seems logical to define an ID if you’re going to use an ID - otherwise why would you have it? This is not the only example of theirs where this occurs, so I wonder if there is content to the course I have missed or overlooked?

Thx
stubir

#2

IDs can serve multiple purpose, not only to be used as CSS selector.
It’s perfectly normal to have ids in a webpage without having a CSS selector used specifically for that.

In this case, the id is used behind the scene to test your page.

Another very common example is a form.
It’s common to give each input a specific id, but don’t expect people to style each input individually just because you have assigned them an id :slight_smile:

Hope it helps :sparkles:

#3

Yeah, that does help for the concept of using IDs, thanks. On the other query, the test is demanding I define the ID (presumably in CSS). I can do this, of course, to pass the test, but the FreeCodeCamp example does not, and yet still passes the test.

#4

The IDs should be added to the HTML, not the CSS.
Id’s purpose is to be an unique identifier in the document (ie: the html), and is meant to be consumed by scripting or styling.

Or to make it simple, css is a consumer of id, not a “creator”.

#5

Here’s my pen for clarity https://codepen.io/stubir/pen/WNojaVo
I’m still building it, so very un-finished.
I take your point about IDs being used in HTML, which is what I’ve done with the ID=“nav-bar” element, which is part of the test requirements. My confusion is why I get a message saying 'nav-bar undefined. I guess I assumed that it was demanding that I define it within CSS, but perhaps not? If not, then where do they want me to define it? Again, within their own example, it is not defined anywhere else: within HTML or CSS.

#6

Two main reason:
1 - your HTML is invalid. At line 13 you forgot to close a <li> tag.

On that note, in Codepen there’s a handy tool that let you analyze your html to spot errors like that. Simply click the arrow in the top-right corner of the html block, and you’ll see the option

2 - Read the test carefully:

Within the element I can see a element with corresponding id=“nav-bar”.’

The test is looking for something called nav-bar.
Your html is defined like that:

<nav id="navbar">

As you can see the ids don’t match. Meaning that FCC test suite is not able to find what’s looking for: that translate to nav-bar is undefined.

Hope it helps :sparkles:

p.s. Don’t get discouraged from this errors: they are perfectly normal and part of the learning process! With time and practice you’ll be able to spot this kind of stuff in matters of seconds! :slight_smile:

#7

Ah! Thank you! Those are pretty fundamental errors, right…?!
Also, I never knew about the Analyze tool, that’s a great steer.

#8

That’s the double edge nature of working with ids: they have to match and be precise at 100%. So even the sightliest error will fail miserably.

The test is looking for very specific elements, it doesn’t offer too much leaning.
It’s a result of trying to normalize the test as much as possible for all the FCC users.