Original subtitles

All right.

So let's now finish up our web app layout.

And let's start by marking up these five buttons here.

So here we have another background color.

So let's immediately grab that here from the violet colors.

So this one is a bit darker.

Let's go actually with the darkest one here.

And so right here, inside of the menu,

I will now replace this with some button elements.

So new

reply,

forward,

mark as unread,

and finally a trash button.

Nice.

So let's put him here,

give them some nice font size

and of course, that background color that we just copied.

Remember on the button

we always need to remove the border

and we also always need to set a cursor to pointer.

So vs code actually already has this abbreviation here

because that is something that we do all the time.

Then also on buttons,

the color does for some reason not get inherited.

So we need to set that manually, even though in the menu,

it is already white.

So we can actually remove that from here

and to make them bigger of course,

let's give them some padding.

So eight pixels and 12 pixels.

So let's take a look and here there are,

and today are centered because these are like text elements.

So inline elements,

and therefore they are treated like texts.

And since we have text align, set to center everywhere,

this also gets then centered inside of this container.

All right?

So let's just make them actually inline blocks

and make the text bold also

font-weight, bold.

And I like to use the display property first

for some reason but you don't have to,

inline-block. Okay?

And now let's actually use flexbox here.

So in order to give them some space between them,

and then I'm actually going to use this example

to show you yet another really cool flexbox trick.

So the parent element of these buttons is this menu.

And so display set to flex, all right.

Let's just check that out.

All right. Nice.

So we have four buttons here and we probably need to get rid

of this padding here in the top.

And then we also want to vertically aligned this, of course.

So that padding is here, so let's remove that menu simply

and then align items, center and gap 12 pixels.

Okay. Nice.

Let's just add also some padding then to the section

here on the left and right side.

And then I finally want to show you something.

So that's oh yeah, that's right here.

So not padding top and bottom and 40 pixels left and right.

And now let's actually select the very last button

to give it that red color.

So since these buttons here

are all button elements inside of one parent container,

we can use our less child pseudo class.

So button and then a different background color,

we're using red for now, but the actual color.

Well, that doesn't really work.

Let's fix that in a second.

Here I'm just going to get some nice pink color here,

which marches just beautifully with this one here.

Oh, of course here I actually forgot to write it.

So last-child and then that color.

So that's red and now it looks almost the same,

but the difference is that this very less element

was moved all the way to the right side.

So how can we do that?

I mean, there's not really a property

that we can use on a container to achieve this.

The closest we could get, but that's still far away

would be justify-content, space-between.

So something like this.

So now we at least have the trash in the very end,

but then the spacing between here is completely messed up.

So that's not what we want,

but instead we want this one to move all the way

to the right side.

So now here comes the trick I was mentioning.

And that trick is to set the margin here on this element

so the left margin to auto.

So then that margin here will automatically be calculated

based well on the width of the container.

So of course, if we then change this,

then the margin here on the left side will change.

And it would also work by setting a margin right

on this one.

But since we already have this one selected,

I'm going to use the margin left here.

Okay?

So that's removed this one here.

And so margin-left set to auto

and there we go, you see?

You can actually see that.

So you see it, that it has a margin of 66.69 pixels,

which is exactly the margin that is necessary

to put that element there.

And of course, if we change this,

then the margin will be smaller.

Well, it looks like it's not somehow.

Let's just make it really small.

Well, that looks strange.

Actually this is the margin, 248 pixels.

And you'll see that now it is getting bigger

and it is actually 863.

So actually 66 was not enough at all.

So that 66.69,

it's actually just the width of the element.

The margin is what we can see down here

in the actual box, model diagram.

Okay. But anyway,

that works nicely and this is a trick

that many people don't know.

And it is a very important one

that I actually use all the time.

But now about this part here,

and this is also easier than it looks

so let's quickly add 10 new boxes here, one for each email.

Okay?

And here, I'm calling them email with the class.

So email one at now, we'll just copy it 10 times.

Just copy of like this

and then prettier we'll actually make it nice for us.

Nine and 10. Okay?

So let's style them.

So email and let's again,

get some gray background color here.

Let's use this one,

which is quite darker than the other one.

So the background color,

and let's get actually this here also some padding of

also 40 pixels,

so that it's aligned with the buttons in the menu bar.

And let's give each of them some height.

So 96 pixels and that should already look quite good.

So here we are.

And now of course our layout did grow vertically

in order to make space for all of these elements here.

So by default, of course,

they do not show this behavior with the scroll bar,

but instead they take up all of this space

and therefore this second row of the grid,

then needs to grow in order to accommodate for that space.

Now let's also actually create some spacing

between these elements and for that,

I want to use the gap property.

Remember how we can do that vertically.

So of course, remember that by default,

the gap property applies horizontally like here, right?

But if we want to use it vertically,

then we can still use flexbox.

All you have to do is to change the flex direction

from row to column.

So we did as before in this section, I think even twice.

And so if you don't remember that,

I even did a very nice visual representation

of that change.

And so maybe you can find that in one of the first lectures

in the section.

But anyway,

the flex container of these email items here

is of course the section.

And so let's make this a flex container.

And then we wanted a gap property of 40 pixels.

And just as a review,

let's see what happens if we do not specify flex direction.

So then of course they are side by side like this

and with the gap applied horizontally.

And so now, as I was saying,

what we need to do is to change this to column

and nice, that looks nice.

Let's just center the text here also inside of each email,

because with that, we can practice some more flexbox.

And remember that this works basically because flexbox

treats texts as a flex item. Okay.

And so we can use align-item, center

and justify-content, center.

So this, we have done many times,

so hopefully these three lines of flexbox

are already nicely inside of your brain.

All right.

And so now it is time for the trick where

we want this element here to not grow larger

than the content. All right?

So by default, of course, this element here,

so this container element

had simply the size of this grid row.

But then we put all of these elements into it

and so then it grew bigger to accommodate

for all that content.

But we can make it so that it does not grow.

So that's right here, it's the section element.

And so we can say overflow and then set to scroll.

Now this alone will not fix it because

since this is now a flex container,

what this will do instead of giving us the scroll bar

is to basically shrink these flex items

because by default, flex shrink is set to one.

So again, by default,

flex items are allowed to shrink if necessary, right?

But we can turn that off by

going to all of these flex items

and then in there set flex shrink to zero.

But this one is of course only necessary

because we are using flexbox.

If we were not using flexbox,

then this one here would be enough, okay?

So just keep that in mind,

this property has nothing to do with flexbox.

This has been in CSS for a long time.

And so now we are back to, if I'm scrolling here,

nothing happens because now this grid row here

is back to just being one fr

so basically only occupying this space here

and then here we made it so that any content that overflowed

would gets some scroll bar.

Now here, instead of scroll,

one of the other things we use all the time is hidden.

And so in this case, then the content that was overflowing

so that it overflow and did no longer fit here,

simply disappears.

So now I'm scrolling here, but well,

these other items are simply hidden.

Okay?

But in this case, that's not what we want.

Sometimes it is.

But in this case we want scroll,

let me actually write that here.

So how elements that don't fit

into container appear.

Now we're back to scrolling.

And so now our nice little layout here is finished

and it looks quite nice.

So I'm really happy with this result

and I hope that you are too.

All right.

And so right now, at this point,

we studied so much HTML and so much CSS

things like flexbox and CSS Grid.

But of course also all the other CSS properties

that we are now ready to start working

on our big and final project of this course.

Just make sure before you moved there,

that you did actually understand everything that we did here

because we will use most of the things

or maybe even all of the things that we learned until now

in this big project.

But then once you're done reviewing everything,

I can't wait to show you that project in the next section.