All language subtitles for 090 Building a Carousel Component - Part 1.en_US

All right, let's now have some more fun

by building another component.

And so in this lecture and the next one,

we're going to build a carousel component.

And just like with the last one,

I chose one of the components.

So one of the carousels

that we saw before in the component gallery.

So in this case,

this blue carousel here

that I thought would be fun to recreate

together with you now over these two lectures.

So as I just showed you actually before,

this is what our final carousel will look like.

And if you ask me, this looks really, really cool.

So we have this image here basically floating

on top of, well, this background here.

And then we have these two buttons here

also with the shadow,

which make them look as if they float

a little bit also on top of this background.

And then we even have these four dots here in the bottom.

So this is gonna be a lot of fun to code.

So let's get started.

Now, here, we have this code

from the previous lecture

and actually I'm going to copy all of it.

And then I will just delete what we don't need,

because we will once again use the same colors.

So basically a similar design style.

So another HTML file,

and this one is called zero two and then carousel.html.

Close down this one.

And so now let's start by removing all the HTML,

except for the body, of course, so like this,

and then also most of the styles,

except for the global selector and the body.

So just like this.

So we also want to keep the font

and so here is just the title

and actually I will now copy everything again.

So basically this empty state here

and create yet another file.

And so then based on that,

we will be able to create our next components.

So then we don't have to do this all the time.

So just some name here, it doesn't really matter.

And okay, so this one will be a carousel component

and so now let's get started with writing some HTML

and here we need some space

because this one is actually a bit wider,

but that's no problem.

We do have enough space here.

And okay, and again, I will use a non-semantic div element,

which this time is simply called carousel.

So just like before it was called the accordion

and let's get straight into the content.

And the first piece of content is the image.

So we need to specify the source attribute

and now this image here is this Maria.jpeg.

So this was actually one of the starter files

for the section.

And now here as the alt text, I will actually use her name,

which is in Portuguese, Maria de Almeida.

Okay, we can close that here.

And now here for this testimonial,

we will use just like before the block quote element.

So this is a common way of marking up a testimonial.

So block quote

and so that is going to be basically

this entire block of text.

And then in there we can put some paragraphs.

So let's give this one here,

let's say it's the testimonial text,

testimonial text and actually,

we didn't put any class on the block quote,

let's just copy this one and get rid of the text.

So this is called a testimonial and then in there,

we will have like the text and the author, for example.

So here again, we will use our blind text generator,

which is just Lorem.

This is maybe a bit too much, I don't know yet.

Maybe like this.

And here we want these quotes,

which we could make a little bit more beautiful,

but let's keep it simple at this point

and here another one for the author.

So testimonial author, and then again, her name,

and finally, this can be the job.

So we're using the job also here

along with the person's name,

simply because in that example, that I'm copying,

they also had that.

And if you take a look at some pages,

then this will actually be pretty common,

at EDP Comercial, which is something that you know,

if you live in Portugal.

Okay, and I think, well,

let's actually also add the buttons for now.

So these two here, at least.

So let's put them outside of the block quote, obviously,

and here at the bottom.

And you will understand a bit later

why I'm not putting like the first button here first

because it appears first and then the second later,

because it is the last element here.

So I'm putting both here at the bottom.

So button and well,

let's simply call it button to keep it simple.

And now in here we want another icon.

So this time, this icon here.

And so we can get that again,

this time it's the Chevron left.

So copy that and paste that here.

So let's call that the button icon.

All right, and then another one for the other direction.

Well, actually we need then of course also this other icon.

So copy SVG and replace this SVG with the new one.

So here again, button icon.

So I'll give it a save.

And now when we go back here to our live connection,

which is of course still live, there is no need to reset.

So of course it is still alive because we never stopped it.

And this is also still the same project folder.

So what we can do here is to delete all of this here.

And since we don't have any index.html file,

it will not open that index.html file.

So if we had an index.html is by default

the page that will be opened.

But if we don't, then it will show us this directory.

And so here is basically all the files

that we have in our folder.

So before we add this one, so if we clicked,

we would get back there.

But of course, now we want to check out this one

so we can click here and this is what we have.

All right, now the image does, as always,

by default take all the space that it can.

And so many times that is the first thing that we fix,

because like this,

it is completely unusable

and actually the image doesn't have any class,

but while it is the only image that we have here,

so let's just keep it like that.

And the height that I have for this image is 200 pixels.

And since we didn't specify the height,

actually in our HTML,

then the width with will be set automatically

in order to keep the same proportion.

So that is at least fixed now

and so let's add some styles for the carousel itself.

So remember that the background color of this element

is that green color.

So by now you know that is the background color property

and we haven't used our green yet.

So copying that here.

Nice and what we also want to set first actually is a width.

So this one has a width of 800 pixels,

which is why it doesn't fit into that smaller window

that we had before.

And now let's center it again

with the margin something and then auto trick.

So let's again, specify 100 top bottom,

and then as always left and right automatically set.

And so now this has the exact same dimensions

as our original,

then let's give it also some border radius

here I'm going with eight pixels,

which again is one of the values in our spacing system.

So could have gone with 12

but the eight is more similar with the original one.

All right, and let's also set the color here.

So if we set it the text color here, then as always,

it will get inherited to all the other text elements,

just like this.

Then since we have this border radius here,

let's also set it on the image.

Okay and I'm still missing here some padding

inside of this container.

So that's why it still looks pretty bad.

So padding and we will start with 32

but we will fix this later.

All right, now let's actually style here the text

and the author and the job.

And again, I'm pressing Alt or Option

to select all of them at the same time.

So copying and pasting.

So maybe you're noticing that just like before,

I'm starting to basically create the visual styles

on all of these elements.

So I style them first visually and then after that,

we take care of the layout.

Now I don't always do it like that,

but for a small component like this many times,

that's a nice idea.

Especially if layout is a bit more tricky,

like in this example.

So here let's use a font size of 18 pixels.

All right and also let's make it a little bit bolder

because this is the most important content.

So we can give it some nice visual hierarchy here

and the line height, of course,

needs to be changed from one, which is the default to 1.5.

Okay, nice, and here let's use 14 pixels

and in this other one 12.

All right, and now of course we need some spacing here.

So four pixels and this one and here, of course,

a lot more after the text,

like this, and this will look better here in a minute

once this is all side by side

but now actually I want to do something which we did before,

which is to improve the visual hierarchy between this text

by using that green color here in this text.

So let me get to those colors actually from here.

So this style CSS remember is the one from the project,

from the previous section.

And so in the text, I want to use this color.

All right, so that changed ever so slightly.

And then here, let's just copy this entire line.

Okay, beautiful and the same thing here

and now, actually this one here

doesn't make any sense anymore

because we overrode it in all three places here.

All right, now, actually let's put this here side by side

because like this, it still looks very unfinished.

So how can we do that?

Well, that shouldn't be too hard because in this carousel,

at least right now, there are only,

well, actually right now, there are four children.

So there's the image, the block quote and these two buttons,

but let's actually still do that

so that we can then a bit later fix it.

So display flex.

So they are side-by-side and then, of course,

as we many times do,

let's center all of these elements vertically,

so align items center.

So after all these times,

you probably already know this one by heart,

I'm pretty sure.

And now let's add some gap, which we will change later,

but for now I'm going to use the same 32 pixels.

Okay, nice, so this already looks like something actually,

but we are still some way away from this.

And actually let's start here

by making the image finally, this big.

So basically growing out of this element.

So it looks like it is floating above

and that's even becoming more prominent

with this shadow that we added to the image.

So how do you think we can do that?

Well, actually we never did anything like this

so that would be a hard question

and so instead, let me actually show you.

so there is no absolute positioning in this case

or nothing weird going on.

Instead, what we do is that we can simply scale this image.

So right now it is this small, but again, we can scale it.

And so for that, we will learn about a brand new property,

which is called transform.

So transform is for many different things.

And one of them is to scale elements, so we can use scale

and so here we use something called a function.

So it's a scale function.

And so here, now we need to specify parenthesis

and then the value by which we want to scale.

So if we write one,

then the element will stay the same size.

If we use two, then it will double the size,

so like this.

But in this case, let's try 1.5

and so that actually looks quite right,

at least here vertically.

So the space that it has right here now,

it looks just right.

Now of course we need to move it

a little bit more to the right.

And the position that the image has

basically to the right is defined right now

by the padding that is on the left.

So let me show you that by inspecting

and here, actually, it becomes nicely visible what happened.

So you see there that original square,

well, if we click here and then we can see it.

So this is what the image was like in the beginning,

just like this,

but then by scaling it up,

of course it then overflows basically the original image

and grows this large.

So if we take that off, we can see it very nicely.

So this is what it was before.

And again, the position here

is kind of defined by the padding.

And so we can increase that padding like a lot

and so then once we scale the image,

it will no longer be outside,

basically here on the left side,

because remember that we want it like this.

So we still want the green part to be visible here.

So what we can do

is to give it some padding to the left here.

So increase the padding, which is 32 on all sides.

But again, on this side,

we want it to be more so let's see what values we have here

and let's go with 86.

Okay, 86 pixels and there we go.

So now if we take a look at that, like this,

then the image used to be here, but then of course,

with the scaling, it now looks different.

So it ends right here now.

So of course, we now also need to increase the gap

because the image is also overlaying this text.

So let's try to go also with 86 and see if that is enough.

And, well, that looks kind of the same

here and here, doesn't it?

Maybe it's a bit more here from the eye,

but I'm not really sure

and so I will just keep it like this.

All right, however, now we have a problem,

which is the fact that there was a lot of space created here

also in these other gaps,

because we still have the buttons here

basically also as flex items where we don't want them to be.

So these should not be flex items,

but instead they are going to be absolutely positioned.

All right, but that we will do in the next lecture.

And so to just very quickly finish this one,

I will just add the shadow

that is still missing here from the image, all right.

So let's add that here.

So box shadow and so again, horizontally,

we don't want any offset.

Then here, let's say vertically 12 pixels,

then a blur of 24

and of course you will have to experiment

with these values here in order to gain some experience.

So RGBA, remember?

At then black, which is usually my go-to

with some off value, let's try 0.1 as always.

And, well, in order to really see it,

we would need to remove these buttons.

So let's do that.

And again, many times I do these kinds of experimentations

right in the browser using the dev tools.

So I will just delete it here and delete it as well,

simply by hitting the Backspace,

so the delete button on the keyboard.

And so now the shadow is nicely visible

but it is not big enough or actually not dark enough.

So we can keep going here again by using our keys,

so that's maybe a bit too much.

Well, let's leave it at 25%.

Now the syntax here is actually a little bit different,

so it's not like RGBA,

but don't worry about that, all right?

So let's just set it here to 0.25,

which is essentially 25%.

Okay, so that is fixed.

Of course the buttons are back,

but never mind about them

because we will now fix that actually in the next lecture.

So after a break, I see you back here.