FAQ: Learn Secondary Navigation - Breadcrumb Styles

With display:inline or inline-block, any whitespace between the elements (eg. a linebreak in the HTML) will be rendered as a space (ie. like a text node consisting of the space character). Whereas if they are float:left, they will touch together with no space between them.


This is definitely the worst lesson yet. I feel like I just followed instructions but didn’t actually LEARN the concept. Like, even with the CSS triangle some people have posted, I understand that, but I don’t understand how it was implemented HERE.


@rt_solo and @dreazybk took the words right out of my mouth.

This whole triangle bit did very little explaining. I copy pasted my way through without really understanding how the triangles were formed or positioned.

Also - if the pseudo elements’ position is absolute, but .breadcrumb a’s position is relative, wouldn’t this whole construction fall apart once the window’s resized?


Well, I did end up fiddling with it until I figured it out, so maybe something good did come out of the lesson’s vagueness. Here’s what I ended up writing in my notes (it might be worth adding something similar to the actual exercise page):

When an empty <div> element has at least one vertical and one horizontal border, said borders will be visible. Make one of them transparent and the remaining border side will have a piece missing at a 45 degree angle where it intersects with the transparent side. In this way you can make triangles by having for example top-border black, and left & right transparent. Or right green, with top and bottom transparent.


That is helpful. I may go back through the lesson with your note off to the side lol

can you pls attach the direct link for the video?

What does this declarations actually do? can someone pls emphasize?

.breadcrumb a::before {
left: -10px;
.breadcrumb a::after {
left: 100%;

1 Like

I agree - it’s a poor exercise. Copy pasting is fine if it effectively explains what’s happening at each stage - but it doesn’t. Also, I was able to complete the exercise incorrectly - without a chevron in sight. :upside_down_face:


Hello Folks, can anyone please explain to me, why after we remove (.breadcrumb a {display}) in 2nd step, it suddenly change its display into block ??
Is it not that the nature of is inline ? Thankyou

Agreed, I was so confused at how the chevrons came about. Was hoping that they’d explain and breakdown the code more in the hints section but it just tells you to copy and past it :laughing:

1 Like

No explanation means not that important right now to me. Moving onto the next lesson!

Not a great exercise, it could be better

I’ doing the “FreshDeals: Blueberries” Project right now and i am very confused by the phrasing of the first task.
" Add breadcrumbs in blueberries.html directly above the site hero using an unordered list."

I do know how to do the list, but what is a “site hero” or even “site” within a html document. I just don’t get it. Can anyone help me out??

@cloud5376483039 I came here to ask the same question! I wound up doing some googling and it looks like a “site hero” is a section of the page. Similar to a header, body, or footer but with no actual html element for it. It’s used to refer to the main, concise breakdown of the site’s purpose. In the Blueberry project that would be the pic of Blueberries with the price and description of what they do. So the breadcrumbs (in my opinion) would go between the “Cart” button and the image.
I agree that this should be more clear, I feel like it wouldn’t take much to explain it as there is no previous mention of it in any of the previous web dev courses that I’ve done (going through Full-Stack right now).

@cloud5376483039 As I was going back to the project to do it I just found that they have a comment in line 28 saying “Hero Section” and the styling it’s using is the “index.css”. Hope this helps!!!

1 Like