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?
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
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.
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”.
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.
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
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!
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.
