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.
6 Likes
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.
10 Likes
@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?
3 Likes
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.
5 Likes
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. 
4 Likes
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 
2 Likes
No explanation means not that important right now to me. Moving onto the next lesson!
1 Like
Not a great exercise, it could be better
1 Like
I’ doing the “FreshDeals: Blueberries” Project right now and i am very confused by the phrasing of the first task.
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-improved-styling-with-css/modules/wdcp-22-learn-secondary-navigation/projects/ui-breadcrumb-proj
" 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
I’m just so glad to see that I’m not the only one not having a clue what I was doing in this lesson. Did it twice, still didn’t get how we make the arrows appear…
However, the “triangle” video linked above made things actually so clear in less than 5 seconds that I recommend anyone who’s having a hard time to simply look at it and cry with joy and enlightenment 
4 Likes
Is this how I post a question on here? cause boy do i have one.
why is it that with every stroke of a key I see no changes to the finale product. Am I missing something? Breadcrumb Styles has me coping and pasting the answers and I see nothing has moved. whats going on?
2 Likes
Yes page does not work. Shame they do not check their system working or not.
Mine also happened, I thought I was the only one witness this.
It’s not working but it gives us the opportunity to solve the problem by ourselves. For the elements in the list we can display them inline, and style the border for the pseudo-element breadcrumb a::after only
.breadcrumb {
text-align: left;
}
.breadcrumb li {
float: left;
display: inline;
}
.breadcrumb a {
color: #fff;
background: darkcyan;
text-decoration: none;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 15px;
padding: 0px 5px;
}
.breadcrumb a::before,
.breadcrumb a::after {
content: "";
position: absolute;
}
.breadcrumb a::before {
left: -10px;
border-left-color: transparent;
}
.breadcrumb a::after {
left: 100%;
border-color: transparent;
border-left-color: darkcyan;
border-width: 15px 14px;
border-style: solid;
}
.breadcrumb a:hover {
background-color: blue;
}
.breadcrumb a:hover::before {
border-color: blue;
border-left-color: transparent;
}
.breadcrumb a:hover::after {
border-left-color: blue;
}
1 Like