Original subtitles

All right.

Now in part three of building the meals section

let's quickly build our diet list

and also work on some other smaller details.

But before we do any of that,

I actually noticed that we have a small bug

here in our code.

So when we hover over this button here,

notice that we have a weird effect here with this border.

So especially when we move the mouse out.

So watch how, that kind of happens immediately.

Right?

So the background color does fade out and in,

but not at the border.

And so that's an error that we have

in the hero section.

Or actually that's not in the hero section.

That's here in the general file where our button is.

And the problem is that...

Yeah, here.

So here in the button,

we transition only to background color,

but well, not the shadow.

So box shadow is what creates that border.

So that's the trick that I showed you back here.

And so right now that box shadow property

is not transitioned, but only the background color.

And so we should not do this.

So I'm duplicating it and then commenting this one.

But instead let's simply transition all properties.

And so that's the reason why I always simply by default

use all because then a bug like that can never happen.

So with bug, we mean mistakes in programming, right?

And so now it looks a lot more fluent.

And so it just as expected.

But anyway, moving back down here,

let's now add our list here.

So we already have that div element here.

And so now let's simply create that unordered list here.

And actually this is the one that I want to call list

and this one let's call it diets.

Okay.

And now each list item should have like an icon,

for example, a check mark.

And then besides that it might have what we'll have

then these list of diets.

Right?

So let's basically wrap each of them inside of an li.

And well, that doesn't work so nice.

So I'm just gonna copy that everywhere.

So using multiple cursors by hitting alt or option,

and then again, it does these automatically,

but then we can move here to the end of the line

and that's a lot better.

Okay.

So there is our list.

Let's just actually add also a class to each of them here.

So I'm again using multiple cursors

by hitting the option or alt key,

and then we can write in multiple places at the same time.

So once more, a very, very handy trick

that we can use in VS code.

Okay.

And actually, I'm also gonna need these multiple cursors

because I now also want to insert the icon here.

So for now let's take a look.

And of course, nothing changed.

So we just edit the class.

But now, yeah, it's quite typical for a list like this

to use a check mark icon.

So if I just search for that here,

then there is one for sure.

So we actually have multiple options here.

So we're using a lot of circles.

So we could go with this one,

but I think that this is a lot cleaner.

So that's actually this one here.

So check mark outline.

And now I simply paste it everywhere.

Right?

So it is everywhere.

And then at once the rest of the content

to be inside of a span element.

So I can very simply do that.

And then again, it created this.

Oh, and now it doesn't work so well.

So now let me just close that here and then copy that.

So this looks like a mess now.

So you need to be careful with where exactly you close

your elements.

So it's right after each of these words.

But then once we have the automatic formatting

coming from prettier, it should look a lot clearer.

And there we go.

So each of the li has one eye and i an icon element

and one span element.

And each of them has then the diet name.

So I think this does look correct.

Let's quickly check that out.

And somehow it always goes back to the top now.

And yeah.

So there are our icons.

And so let's now visually format all of this.

And the first thing that we should do is to get rid

of the bullet points there.

So let's come down here.

Now that's very simple.

List-style, none.

Okay.

Then let's also of course, style the icons.

Oh, and here I forgot to add another class.

So again, I'm using multiple cursors here

just to make it easier.

And there are actually even better techniques,

but that would be a bit too much here.

So class and then a list-icon.

Okay.

So width, let's use 30 pixels

and then the height needs to be the same.

And remember at here we actually need to use the color

in order to style the color of this icon.

Okay.

Nice.

So that's the icons,

but now of course, we need to make the text bigger.

So let's do that here in list-item.

So font size and them again, using 1.8 rem,

which is kind of a standard that we use in many places.

Right.

And then we should vertically align all of this.

Right. So the icon with the text.

And so let's just make this here a flex container.

Because once again this list item here is the parent

of this icon end of the span.

So just what we also had here before in this list elements.

So display flex

align items of center,

and let's of course also add some gap between the two.

Okay.

Nice.

So we have to spacing here.

Now of course we need to spacing also between the elements.

And so once again,

I'm now using the trick of using flex direction column.

So that's again, very similar to what we did before.

So display flex, flex direction column,

and then let's also use 1.6 rem for the gap.

Okay, beautiful.

So that's looking great.

Let's just add a title here.

Let's see if there is one in the content.

And well, let's just use what they already have here.

So only food works with any diet.

And then here let's do that before this list,

but of course still inside of this container.

So this diets element,

which is basically this column in the grid.

So again, using the h3 with the heading tertiary class

that we already created before.

So I think that was the name.

And if not, we can just fix that.

Colon here.

And nice.

Now the Omnifood here is maybe a bit too much

because if we remove that and had just works with any diet,

then that would fit probably just in one line,

which would look a lot better.

So works with any diet.

Yeah.

That's beautiful.

And the spacing is also already nice,

which is because this is the exact same element

or it has the exact same styling as this one.

Okay.

And so there lies the power of reusability across the page.

Okay.

So this looks good,

but actually I want to add another thing.

And that is just like a small link here

in the end of the section which can lead us to all recipes.

So let's say that this year are like the sample meals,

but that the user wanted to see what meals

are actually available in Omnifood.

And so then after these simple meals,

there might be a link that will lead to a different page.

So we will not build that page of course,

but we can still add a link here below.

Okay.

So we want to do that in the same section,

but outside of this div here.

So let's select that because then it will select

the one at the top so that we can see what's happening.

So we want it to happen after this container.

Right?

So after this grid,

so that simply add another div there and another container,

because we also want this one to be centered

in the view port.

So div class

container,

and that's also called us all recipes.

So here, all I'm gonna do is to add a link

that is not going to point anywhere.

And I will add to class of link.

So here, what I want to do

is to basically create a generic link element

that we could once again, reuse all over our page.

So see all recipes.

And then here, I like to use that right arrow.

So rarr.

So that's an HTML entity that I use all the time.

And so I already know it by heart.

But on my resources page,

there is a link to a page which contains a utlist

of all the relevant HTML entities.

All right.

Now, of course for now that doesn't look great.

So let's fix a couple of things

starting actually with a spacing, maybe.

So how can we add spacing here?

I mean, this element here,

all of this is a container and a row or actually a grid.

So just as we saw before, let's go back there.

So we have container grid and grid-3-columns.

And so to now add some margin here to the bottom,

we would have to create another class for that margin.

Right?

So we don't want to add any margin

to any of this reusable classes here.

Right?

Because we want them to be basically as neutral as possible.

So we could add another help or class here.

So a little bit like we did before.

And actually let's do that.

So we did that here with one of the buttons.

Yeah.

So here at the margin, write small.

Because we had the same situation where we didn't want

to add any margin to any of these button classes here.

Again, because they should be reusable.

Right?

So let's not do another helper class,

which I'm gonna call

margin bottom and let's call it MD for medium.

And here I'm gonna use 4.8 rem.

And again, using the important keywords

so that it really will apply.

And so now if we add this class here,

so yeah, so to this grid and this container here,

then that will add that margin.

Okay? And here it is.

Right?

So hopefully that made sense.

And you understood why we did create

that new special class here.

Right? Now we could have done it in another way also.

For example, simply adding a margin top

to all the recipes right here.

Right?

So that would also have been possible,

but I like to use the reusable way.

So let's create the all-recipes here

and let's center the text

and let's also give it a fun size off again, 1.8 rem.

And I'm putting the font size here and not on the link.

And I'm doing that for the same reasons as before.

So that maybe I will want to reuse this link

on other places in the page.

And then I don't want to have it always

with a font size of 1.8 rem.

So somewhere else,

maybe a better font size for a link will be 1.4 rem.

And so then if we had this fixed size, we could not do that.

And so by setting the font size here then the to link.

So the anchor element will simply inherit that size.

And here it is.

Right?

And now of course, we need to style this,

to adapt it to the rest of the visual style of our page.

And so let's do that right here.

So after this button, maybe.

So link.

Well, that should be first link link.

And then the visited pseudo class.

And here, the first thing that I want to do

is to give it a burnt orange color.

Then I want to remove the text decoration,

set it to none.

But then I actually want to recreate something similar.

So let's just see what we have right now.

And so of course now there is no underlining,

but usually links do have some underline, right?

However, usually we do not use text decoration for that,

but recreate it using a border because as I will show you,

that looks a lot nicer.

So let's do that.

So border bottom, one pixel solid

and then the color of the border.

And now here, let me show you yet another trick.

So instead of writing the exact same color as we have here,

which is the color that we want.

So instead of doing this, we can do something else

which is to write the current color keywords.

And so what this will do is that it will take the color

that is currently the text color.

Okay?

And so then we don't have to repeat the same color

and that is especially helpful

if for some reason we changed the color,

for example, on a hover state.

Okay?

So for now it doesn't look so good yet.

So that's okay.

But what usually we do when we design a link

is to then give it some petting at the bottom.

So petting bottom, and then something really small,

like two pixels.

And if we want to use petting,

we also need to set this to an inline block.

Right.

And so let's check that out.

Now that looks kind of the same.

So let's inspect that here.

Oh, Well, that actually makes a difference.

So these two pixels that we have here,

and if we had the text decoration, it would be right here.

So that does not look ideal.

And so this is why everyone does it like this.

So we removed the text decoration

and then do it in this way.

All right.

And now as for the hover and active states,

which as you'll see, we usually always group together,

but we wouldn't have to, of course.

They could be different

and we did that in the very first project,

but again, it's very common to see them being together.

Okay.

So here let's change the color simply to the darker color,

which is this one.

Okay.

And then as we hover over it,

watch how the border also changes to the same color.

Right.

And so that's because we use the current color trick.

So that keyword.

And so now, yeah, it always automatically

has the exact same color as the text.

Right?

However, in this case we actually don't

want the underline anymore.

So that's another common style that is common to use

on links.

So when we hover them, we remove the border at the bottom.

Right.

However, we cannot just say border bottom, none for example.

And let me show you why.

So you see it, that the entire layout

jumps a little bit by one pixel, right?

And so that is because that one pixel

is actually part of the element.

And so when we removed that on hover,

then the element becomes smaller.

And then while that messes up to spacing of the entire page.

and in this case, it is just one pixel,

but still it will create a noticeable effect.

As you can see here,

or maybe you can experiment it on your own computer.

And so instead what we do is to keep it at one pixel still

solid, but instead of giving it a real color

we use the transparent keyboards.

Okay.

And so here you just learned another important keywords

for colors.

And so that will now fix that problem.

Okay.

Now, just to finish, let's make this animate here as well.

And so on the, a normal state,

we use the transition property with all and set it to,

let's again, use 0.3 seconds.

Okay.

So that looks very nice.

And so now let's analyze our entire section here.

So I think it looks really, really good,

like professionally designed,

but we can still improve just a small detail here.

So right now,

due to the fact that we have this link here centered,

we can see some imbalance here.

So all of this looks a bit centered here as well,

and then also the link,

but then we have this year aligned to the left side, right?

So it's aligned to the left, just like here as well.

And so to make this one a bit different from the first one,

and also to add some balance to the section,

we can also center all of this.

And as you will see,

this will then create a really nice effect.

So making it a little bit different than the other section.

All right.

So to center that text,

we have to come here to where it is defined.

So that's right here.

Now, how can we actually center this text here?

So of course, we do not want to add text align center

on these two, right?

And once again,

that is because these are supposed to be reusable.

So instead we can simply center,

so we can simply set the text align center property

on the container here.

Right.

And so that's exactly what I will do.

And I will create another helper class here.

So let me actually write that here.

So helper classes,

or we can also call them like settings classes.

So these are small helper classes that have just one

declaration.

So I'm calling this one here, let's call it center text,

and then text the line center.

And so now I can simply add that here.

So center text,

and then these two elements will actually inherit that.

Right.

We could also put it directly here and here.

Well here, actually I think it would not work

because this is an inline element, unless we change that.

Well, let's see if we actually did.

Oh yeah, we set it to a block.

So we could actually also set centered text here, but well,

it's simpler to simply put it here

and then have these two elements inherited.

Okay.

And so once again,

we created this helper classier for the sake of reusability.

So to make these two reusable,

instead of having that right there.

Okay?

And so now this entire section here looks

like it is really centered on the page.

Okay?

And so with this,

we could now say that we finished this section,

but I just want to show you one more thing.

So I want to add a nice hover effect here

on these two cards.

So that's something that we would not have to do, but yeah.

I want to show you more and more things here.

So let me just quickly show you how we can do that

in just one line of CSS.

So that's something that I think we have never done before,

which is to use hover on something that is not a link,

but we can of course, perfectly do that.

So we have meal, which is the entire cart,

and then we can use the hover pseudo class on that one.

So the effect that I want to implement here is that

whenever we hover over this element,

I want the entire element to move up a little bit.

All right.

So again, I'm sure you have seen this in action

somewhere on the web.

And so for this, so far moving up,

I like to use the transform property

with the translate value.

So we have used translate before,

remember that a couple of times.

And so here we have to define two values

where the first one is for horizontal movement.

And the second one is for a vertical movement.

So for example, we can say 2 rem, 2 rem here, right?

So again, horizontal, which is like X,

and then the second is vertical which is Y,

sort of X and Y axis.

So of course this will not be what we want,

but you see that once we hover it it does happen.

So it does move 20 pixels down and to the right.

Okay?

However, I only want to move it up.

So only in the Y direction.

And so here, actually we can use the translate Y property.

And so then we only define a the Y property.

So the vertical one.

Right?

So that is a bit better already.

So just in one direction, but I wanted to go up.

So that's minus two.

Okay.

But that's also a little bit too much

because this effect should be something very subtle.

And of course also there should be an animation.

Right.

So 1.2 rem here and now the animation.

Now, how do you think we can do that animation?

Well, once again, that's very simple.

All we have to do is to use the transition property

on the original state.

So that's this one.

So transition all, and now let's go a bit higher.

So the bigger the element the longer we can animate it.

So let's now use 0.4 seconds this time.

Okay.

Nice.

That looks quite nice, actually.

Great.

And now just as a very final touch,

let's also manipulate the shadow here a little bit

to make this effect look a bit more realistic.

So by moving up the element, we kind of simulate it

moving closer to the source of the light.

Right.

And so therefore the shadow can then become a bit larger.

So let's do that.

And I will just copy this here.

So right here.

And so we will make it larger.

So let's move one step up here to 3.2 rem

and here to 64 so to 6.4 rem.

And then we should also make it a bit lighter.

So a shadow that is more diffused and bigger

basically also naturally should be lighter.

And again, these things you will learn them with practice.

Right.

All right.

So that's very subtle actually.

But if you notice then the shadow does change a little bit.

And this makes it more natural, indeed.

Okay. And so, yeah, that's it for this section.

once again, very beautiful, very nice looking, I think.

And our page is really coming together here.

So we have this beautiful section.

This one here is very gorgeous as well.

And of course also our header.

So hope you're having a lot of fun here

and that you are starting to become really proud

of what you're building here.

And yeah.

Once you're ready observing this beautiful project

then let's move together to our next section

because there is still a long way to go.