Original subtitles

Okay, so let's keep working on our carousel.

And I'm going to start by actually nicely formatting

these buttons here,

just so that they look like these two here.

All right.

So basically, making them white and round.

And the icon green

and giving it some shadow.

So let's have that here.

Let's add some comment here, like the controls.

And so we want our button here.

So first of all, the background color

was, remember, white.

Okay.

And then since this is actually a button,

it has by default a border that we need to remove.

So that's a problem we run into before.

And so the trick is always to set border to none.

And so then, it actually disappears completely.

But let's set that back.

So here we can simply define some height

and some width.

Let's say 40.

I think that's part of our list here.

Well, actually not,

but let's cheat here in this case

and use the value depths between 32 and 48.

So we need to do that,

so that it looks more like the actual example.

And width, 40 pixels as well.

So there we go.

And finally, we can see actually the icons now as well,

but they are very small.

So we need to change that.

And here they are called button icon.

So button icon.

And again, we will go with the height and width

of 24 pixels.

And there dare we go.

Nice.

Now, the fact that they are actually not squared.

So basically, that the width property is not being respected

as the fact that they are right now, flex items.

And so remember the width,

works a little bit differently there.

So right now the browser is trying to fit

all this content here into the flex container.

And so it will automatically shrink these items here,

even though we set a width of 40 pixels.

So if we actually want to see the real result,

we should now take them out of this flex container.

And the way in which we will do that

is by actually positioning them absolutely.

All right.

So I will show you a little bit later

why we do it that way,

but for now, let's just do that.

So position absolute.

And so remember, by doing that,

we take the element completely

out of the flow of the page, right?

So for the surrounding elements,

it is as if these elements were no longer on the page.

And so then, basically,

only these two elements here remain as flex items.

All right.

So that's very important to remember

about absolute positioning.

And another thing that's very important to remember

is that we need to specify inside of which container

these elements should actually be absolutely positioned.

So in relation to what parent,

the absolute positioning is going to happen.

And remember, that we need to, basically,

choose a parent element

and set that one to position relative.

All right.

So in this case, that is pretty obvious, right?

So the element that should be the parent

of these two here

is this entire carousel.

So it is inside of that

that we want the absolute positioning to happen.

So we need to do this,

even though it is, of course, already the parent,

but we still need to do this.

Okay, let's see what happens now.

And there we go.

So now they are finally back to being squared.

Even though they are, of course,

still not exactly in the position

where we want them to be.

But we will worry about that later.

For now, let's finish formatting them.

And so we want them to be round

and therefore let's use a border radius

with a really high value.

Or actually, since they are squared...

Remember, we can simply say 50%

and that will then make them round as well.

Then here we want actually this to have a color.

So this icon, again, we use the stroke property.

All right.

And there we go.

And then it looks as if this icon here

is not really centered inside the button,

but we can actually fix that quite easily

because this element here is a child element.

And so, we can actually use this nice trick

of simply setting this to a flex container

and then align items to center it horizontally,

or actually vertically,

and justify items

or justify content, of course,

and central as well.

And so now that is nicely centered.

So as we saw here, flexbox is even very helpful

when there is only one flex element.

So one flex item.

So, right?

So in the button, of course, there is only one element.

But still in order to vertically center that,

the easiest way is to declare the parent element

as a flex container

and then center it both horizontally

and vertically like this.

All right.

But now, comes to time where we actually want to position

these two elements.

So this one here should go to the right

and then a little bit outside of it

and the other one to the left, right?

So actually, we need two different classes for each of them,

so we can position them separately.

So this one is...

Yeah, this is one button.

So let's give it here, simply, another class.

So a variation of button, which is button left.

That's why I like to use these two dashes there.

And then button right.

Like this.

Okay.

Actually, let's do it after the real button.

So let's start by saying left, zero.

And 10 on the other one,

We say, right, zero.

Okay.

So that looks good already.

And for some reason they are already

vertically centered,

but let's pretend they are not.

Okay.

So probably that is because of this flex container.

Let's see.

So they're still in a way flex items,

even though they are absolutely positioned.

And so, if we no longer would align these items vertically,

then you see that they would actually also move

to another position.

So for now, as we implement the technique

that I want to show you next,

let's leave it like this.

All right.

So let's go back to these buttons

because now I'm going to explain you

and to show you a brand new technique

that we use in CSS all the time, actually.

And so this one has to be with absolute positioning

and also kind of with centering at the same time.

So to start,

let's go back here to see what we actually want,

which is these two buttons here

to be exactly vertically centered

and even more importantly,

also exactly centered here, basically, on this line.

So on this transition. All right?

So how can we do that?

And let's actually first focus on the vertical centering

using absolute positioning.

Okay?

So we might think that we could vertically center

this element simply by setting the position

here to 50%.

So actually the top.

So here in the top property,

remember that we can specify the distance,

basically, from the top.

And so we can do also that in percentages.

So for example,

we could specify 10%

and then that would look like this.

However, we can also specify 50%.

And so, as I was just saying,

we might think that since 50% is half of 100%,

that this might then vertically center this element.

So let's take a look.

And well, it kind of does.

But it also doesn't.

And the reason for that is that basically 50%

is exactly half of the width of the parent container.

And so that's from here to here.

But that is only the start of the element.

So the element starts right here,

but basically, we would like the center of the element

to be here in the center.

Right?

But that probably sounds a bit confusing.

So let me actually show you now

a visual representation of this technique.

So this is our starting position

where we have to carousel with the position

set to relative

and button left with the position set to absolute, right?

And so now, as we just did,

we set the position to 50%.

And so what that does is to move this element

by exactly 50% of the parent's containers height.

All right?

So for example, if the carousel had a height of 600 pixels,

then this button would have moved down 300 pixels.

So exactly 50% of the parent's container.

And this is really important. Okay?

However, as we see here,

what it did was to basically move the top of the element

exactly to the middle, but not the element itself.

And so that's where the second part

of this technique comes in.

So this technique of vertically centering

with absolute positioning.

And so that second part is by using

the transform property, once again.

Now, in this case,

we use transform not with scale,

but with translating.

And what translate does

is to basically move the element around.

Now, here we can specify the X value,

which is basically horizontally,

and the Y value, which is the second one,

and so that is vertically.

And in this example,

I set that to minus 50%.

And why minus 50?

Well, because that will basically

move the element exactly 50% of its height

back to the top.

And again, these 50% here in the transform property

are actually 50% of the actual element's height.

So not of the parent container's height.

And that is completely different. Okay?

And so the result of doing this

is that now the element will be exactly centered vertically.

So again, the translate property takes two values

where the first one is basically horizontally

and the second one is vertically.

And so by specifying minus 50%,

means that the element will move up because of the minus.

And it will move up by exactly 50% of its actual height.

And so by doing this, after the second step,

it will be completely centered vertically.

All right?

So I hope that made sense,

especially with this animation,

and maybe we can play that again.

So we start here,

which will move the element down here.

So again, 50% of the parent container's height.

Then we add to translate, as I just explained,

which will move it back 50%.

Okay?

And so let's now go back to code

and actually implement this.

Okay. So here we are back.

And actually, let's put this here in the button left,

so that we don't get too confused.

Okay. So that looks the same.

But now let's go back to our transform property.

So transform.

And remember, now we don't use scale like we did before,

but we use translate.

And here, again, we set the first one to zero by now,

which is horizontally.

And then vertically, we want minus 50%

for the reasons that I just explained you.

And so, take a look at this button now.

And there we go.

Now it is vertically centered using

this absolute positioning technique.

Great. So that's beautiful.

But you might be wondering

why we didn't simply use the power of flexbox for this.

And the reason is that...

Well, we actually don't this to be a flex element,

that's the first thing.

The second thing is that sometimes

we actually want to position an element

absolutely like this,

and then it is important that you know this unique.

And third is because,

actually, if we want to use translate

also horizontally, right?

Because in this case, if we simply used flexbox,

then actually this wouldn't work.

First because, remember,

it created all those extra gaps

for all of these elements that we did not want.

And then also because it would be impossible

to place these elements,

basically, outside of the container.

Which is exactly what we're going to do now.

Right?

So what I mean here is that this translate,

of course, is not only vertically,

but also horizontally,

So we can specify a value here.

So let's experiment first with some other value.

Let's say 10 pixels, just so you see how it works.

And so what happens is that it moved 10 pixels to the side.

Right?

But what if we set it to 50%?

Well then, basically, it will move half of its own width

to the right side.

So that's almost what we want,

but we want it to move to the left side, right?

And so we say minus 50%.

And there you go.

Now it is exactly where we want it to be.

So right in the center here,

basically vertically centered with this border here.

So this end of the element,

and to make that even more visible,

let's add a box shadow here.

Okay. So...

Vertically, 12 pixels.

Then let's blur it, 24.

And once again,

I'm just using these here very quickly.

And with experience this will become easier for you.

All right.

And so now we can see that beautifully, right?

It is really exactly at the center.

Now we could, of course,

also have done it completely without the transform.

So if we did this,

of course, it would look like this

and we could then try to guess these values here,

kind of manually.

But the problem is that, again,

these top and left values are not in relation

to the element itself, but to the parent element.

So that is really one of the main takeaways of this lecture.

So in relation to parent element,

so I'm actually writing that down here for you,

and this is in relation to element itself.

And so here we could now say minus one,

25 pixels or something.

And in this case, we do actually know the width

of these elements.

So we could have said, minus 20 pixels

and then that would have worked.

But usually that is actually not the case.

And so that is over simplifying it.

So usually, we would have to mess here manually

with some pixels or even some percentage,

which is even worse.

Like 3%, for example.

At the end, that is too much.

So we would try 2%, which is not enough.

And so, yeah. This is not a good idea.

It is better to put these to some default,

like zero and 50, and then use this.

All right.

Then here we need to do the same transform

in the button right

but in the opposite direction.

So of course we need this top here as well.

So let's put that...

Well, let's copy it.

Just so it's a bit easier for you to understand,

but we could also have simply put it here into the button,

which is the class that both of them have in common.

But anyway, now it looks like this.

And so in this case,

we actually wanted to move to the right.

And so here, this value needs to be positive.

Okay. And there it is.

So we have our buttons here completely positioned

in the exact position where we wanted them to be.

And so once again,

that is a perfect use case for absolute positioning.

Now let's turn this back on.

So to put the text back to where it was.

And also we need some...

We want the cursor here to be a mouse

on these buttons.

So that's something I forgot.

And it's a trick that we already used before.

So cursor set to pointer.

All right.

So that looks almost the same.

It is a little bit different.

But that's... Well, because we use some different values.

But what matters is that we are still missing

these dots here.

So these are basically also buttons

and they are located also outside of this container.

All right?

So if it's outside of its own container,

that looks, again,

as if we will need some absolute positioning here.

Right?

And so, let's go ahead and now code this part very quickly.

So right here at the very end,

where these controls start,

let's add some container element.

Let's say some div,

which I'm going to call the dots.

And then let's put four button elements in there.

So for these four elements.

So the button with a class of dot.

And now, what should we put in here?

Well, we can simply leave it empty.

But usually, it's a better practice

to create an empty space.

So something that looks like this.

But remember that HTML actually

ignores empty spaces like this.

So instead of writing an empty space like this,

it is a common technique to use an HTML entity for that.

And that entity...

So that entity that represents

the empty space is NBSP like this.

So you'll see it here.

It's a non breaking space.

That's what "NBSP" means.

All right.

So again, that's just in order to not leave

this button completely empty,

which is not a good idea usually.

Okay, copy it four times.

And then we need dots and dot.

Okay.

And let's start with these.

Giving it some height.

And some width.

And individual styling here is not really important.

For me, what matters most at this point

is more the stuff about laying out the elements, actually.

So again, since this is a button,

we need to reset the background color

or set it to something.

So let's set it to white.

That then it looks like we have

some border going on here, right?

So border and that is two pixel border.

Solid and/or green.

Okay. Let's check that out.

And here it is.

Now we cannot really see the border because it is green.

And this whole dots element is of course now

yet another flex item

because we didn't yet position it absolutely.

But let's do that a bit later

and continue with styling the dots.

So here, let's also make them round

with a border radius of 50%

and give it the cursor like this.

Okay.

All right.

And now we need to also put them side by side, I guess.

All right.

So for that...

Well, actually let's first position them absolutely.

So position absolute.

Okay. There they are.

And now, of course, we want them to be in the center.

So right here and then at the bottom for now.

And so we will now, again,

use the exact same technique that we used before.

Only it being horizontally this time.

But the technique itself works in the exact same way.

So what I just explained you before in that slide.

So this time, instead of setting the top to 50%,

I will set the left to a 50%.

So left, 50%.

And so that will move, basically,

the start of the element right to the middle

of the parent container.

Because, again, top and left use the dimensions

of the parent element as the reference.

Okay?

But now, we use transform and then translate.

And now the first value is the horizontal one.

And so we move it back 50%,

which, remember, is in relation to itself.

All right.

And so now it's in the center.

Nice.

Let's also put it at the very bottom.

Bottom, zero.

There we go.

And now let's move it down.

And so for that,

I really like to use the transform property.

So again, I like to put these here to zero or to 50%.

Or some really round value like that.

And then here we can use translate

to position it exactly where we want.

So let's say 32 pixels,

which is one of our values.

And yeah, that looks nice.

And so now let's actually put some space between them.

And to do that, I will make this a flex container

and declare some gap on it.

Okay.

And if this is all going a little bit too fast for you,

especially the constant use of the flex property,

then, of course, feel 100% free to maybe review that part.

So maybe the part about flexbox.

But anyway, let's not define some quick gap here.

12 pixels.

All right. Beautiful.

And with this, we might be...

Well, almost done.

So the first one here, still needs to be green.

So let's give the first one a special class.

So maybe that's yet another trend

that you are starting to see.

So that we have one class for everything.

And then we have specialized classes,

which give some of them, basically, some additional power.

And in this case, that additional power will be

that green background color.

There we go.

And that looks basically the same.

Just again, some spacing that's different.

The content is also different.

But besides that...

Here we actually need to fix a bit the padding.

And I think that's something I mentioned in the beginning.

So let's do that.

And also that's an opportunity,

actually, to you show something else.

So here, of course, we could simply write,

padding to the right.

Should be like 48 pixels.

So that's better.

Let's just remove that last word there.

I don't like the way that looks.

Even this one maybe.

Cool.

Yeah.

But anyway, going back here,

this of course works

because we set the general padding to 32.

Then we override the padding on the left to 86.

And then we override the padding to the right to 84.

However, we can set that all in one go.

So remember how the padding property has a shorthand,

which allows us to set the top and bottom in the first value

and the left and right in the second value, right?

So like this.

So this would be top and bottom and this left and right.

However, we can also take that further.

So we can specify four values,

and those four values will then be top, right,

bottom, and left.

So basically, clockwise starting at the top.

So let me take out all of this

and replace it with just one declaration.

Again, it starts at the top

and then goes clockwise around the four borders, basically,

the four sides of the box.

So in the top, we want 32 pixels.

On the right, we want 48 pixels.

And the bottom, 32 pixels.

And to the left, 48.

Give it a save.

And that is wrong because actually on the left, it is 86.

So this one here.

And so now it is correct.

And so now we did actually finish this small project.

It was a bit bigger than I thought it would be.

But still, I think it was fun.

And the final result looks fantastic.

And we did learn a lot of things here.

Actually, starting with this.

So this is something new.

Then we learned how to scale an image.

And then finally, we learned this very important technique

where we could place an element anywhere that we wanted

by using combination of absolute positioning

and transform with translate.

So maybe experiment a little bit

with the transform property,

with the translate function.

So try different values here

for horizontal and vertical placement.

And that will then help you solidify this new knowledge.

And then, I see you back here for our next component,

which is going to be a table.

And I promise, that's going to be a little bit simpler.