Original subtitles

Welcome back

to the last coding challenge of this section.

And as always, we will keep working on our same project.

So, this is how we left it

after our coding challenge, number two.

And so as always, keep this as a starting point

which hopefully you have on some CodePen

or somewhere on your computer.

And if not, the link to this code will be in this lecture.

And what I want you to do

is basically to change this to this.

And essentially there are only two big changes.

First, we have this sale label here

in this top left corner of the element.

And then also down here,

we have basically these six available colors

in which we can buy the shoe.

So I want you to build this part here and this.

So this sale is very similar

to something that we did before.

So hopefully you remember that's this, okay.

But in this case, you actually don't need to use

a pseudo element for that.

You can simply add a element, for example,

a paragraph for the sale and then position it here,

just like we did it in one of the previous lectures.

Now, maybe you're noticing this detail

that in this text, there is some space

between the different characters

or these letters here, right?

And so there is a CSS property which allows you to do that.

And what I want you to do is to Google that.

So I want you to use Google to figure out

how you can add that space a little bit like I showed you

in the developer skills lecture about Googling.

So now you can apply that as well.

Okay?

So that is one of the things that you need to do.

And the other one is this here.

So basically what you will need

to do is to create an element.

And then inside of that element, which can be a simple div.

So inside of that element,

then you need to create six more elements.

And these can also be divs if you like.

And then all you need to do is to give each of them

a color and put them side by side,

using a neat little trick

that we actually also learned in one of the lectures.

And in particular, it was the lecture

about the types of boxes, if I remember correctly.

So this was a nice little trick that we used there.

And so you can use that here as well.

And if you don't remember it,

as always there is absolutely no problem

if you need to go back to our code

and look up exactly how we did that.

And the same, of course, goes for this technique here.

So I don't expect that you memorize

all the techniques that I show you here.

But if you can look them up in your code

and translate them to a different situation,

that already would be an amazing achievement.

Okay.

So if you can just do that,

then please go ahead and pause the video now

and I'll see you once you're done.

All right back to work here.

And let's start with the sale label.

So as I said, I will simply add a paragraph somewhere.

And since we will position it, absolutely,

it doesn't really matter where it is.

But I will just put it here

close to the price and the shipping

because semantically that's where

it makes sense to be located.

So let's give it a class of sale.

And then we want the text of sale as well.

And then let's close this.

And now we're here in our CSS.

Let's put it also close to this shipping.

So down here.

And let's start by adding some visual styles to it.

So some background color, for example.

And here you could have just used

any red color that you wanted.

For example, using the VS Code Color Picker.

And I also did that.

And so the color I came up with is ec2f2f.

Just like this.

It actually go there.

Now, right.

Then let's worry about the text.

So let's make it white.

Like this.

Give it a font size of 12 pixels and make it uppercase.

And make it bold as well.

So font weight, bold.

Let's give it some padding.

7 pixels at the top, 15 left and right.

And again, these don't really matter.

But many times it's a good idea

to have the horizontal padding

to be kind of double of vertical.

That's a good rule of thumb

that many times looks very good.

And now the next step is that, actually we want this element

only to occupy the space that it actually needs.

So, there are two techniques for that.

Well, actually just one, but you could also kind

of achieve this in a different way.

So the best way to do this

would be to set a display to inline box,

actually inline block.

And so now indeed, just like any inline element,

the box only occupies the space of its content.

Okay.

So this is the correct solution,

but let's comment this out to show you another solution.

So you could have also kind of guessed

the with of this element, if you wanted.

Let's say 100 pixels and then we could adjust it.

So let's say just 80 pixels or just 50 pixels maybe.

Or 40 even.

And then once you kind of got close,

you can then just say text, align, center.

Because now there is actually enough space

around the element inside

of which the text could then be centered.

Okay.

So when we have actually a width,

then we are no longer in that situation

where text align center doesn't make sense in an element.

Like we had before here with these links.

Remember that? So I think like two lectures ago.

But anyway, this is not the preferred solution,

but it is something that we could also have done.

So, I found that interesting to also show you that.

And so now it's time to actually

absolutely position this element right here.

So let's remember that the first thing that we need to do

in order to absolutely position an element

is to define in relation to what parent element,

this element should be positioned.

And so on that parent element, we set position to relative.

So in this case, that should be quite easy, right?

That is simply this product here.

So this article with the class of product.

And so, this is where now we want

to set position to relative.

And so, now we can go back here

and say position absolute.

And set the top and left to zero. Just to get started.

Okay.

And now we can kind of guess the values

where this should be.

So, let's say like minus 15 pixels.

That can be a little bit more, 17.

Yeah.

So now it's like nicely in the middle

and now let's move it also like 30 pixels to the left.

So that's not quite centered yet.

Let's say 35.

Well, let's actually make it 34,

so it's exactly double off the top.

All right. So with this, we are almost done with this part.

All that's missing is this extra space

between the characters.

Right?

So to give it this extra touch,

and also because I wanted you

to practice your Googling skills.

So what I would have Googled is,

CSS add space between characters,

or you could have written letters as well,

but here you actually immediately get the result.

So letters spacing.

But I'm more interested in here,

usually in a stack overflow reply

or this documentation of MDN.

So here we have letter spacing,

which looks like something we want.

And so here, indeed we get as always

a couple of different examples.

And so, yeah. This is the property that we're gonna use.

So I'm copying it.

Let's put it here, close to these styles.

And I'm setting it to two pixels.

And yeah. That actually looks a lot nicer.

Now we just need to like, push it

even a bit more to the side there, like this.

To center it. And yeah, that's it.

So we are done with this part.

So now let's quickly add those colors here.

And as I said, previously, we will basically create a div.

So a container without any semantic meaning.

And then in there, I will create six more divs.

And then each of them will get its own background color.

So, that should be right here after the link.

Right? So after the link and before these product details.

So a div, and I'm calling it the colors.

Let's just immediately close it so we don't forget it.

Because this editor is not as good as VS Code.

But it's still quite helpful

to actually use CodePen for something like this.

And now we will just create another div in here.

Color.

And then actually this doesn't have any content at all.

All right.

So this is something we didn't really do before.

And so let me just explain and show you how we will do it.

So we want six colors.

So I'm just a copy pasting it six times.

So yeah.

Let's put that right here at the end.

So just like in the HTML.

So the colors class is not really important, I think.

So let's just start by defining each of the squares.

So each of these.

So basically we make them a square

by giving them a certain height and then a width

which is the same.

So let me show that to you.

The first thing we should do is

to give them a background color

to make it easier to see it.

The first one I think was black.

All right.

But right now they are not visible

because they don't have any content.

But if we give them a height and the width,

then they will become visible.

So let's do that. Height 22 pixels.

And so now immediately they get a height

and then they occupy all the space that they can

because they are block level elements by default, right?

So they are divs and therefore

that is by default a block level.

But now if we specify their width to be the same,

so it looks like a square then,

Well then of course they no longer do that.

Okay.

So of course we are still far away from the final result.

But in order to continue effectively,

let's now give each of them a different color.

So how can we do that?

Well, I will actually add another class to each of them.

And that is completely possible.

Remember that we are allowed

to give each element more than one class.

So I showed you that before.

So the way we do that, is to add a space

and then simply add another one.

So the first one was black,

then blue, red, yellow, green, and brown.

And so,

Well, in the first one, we actually don't need to do that

because they are black already, all of them.

And so we can then basically override that

in all the other ones.

So let's call this one, the color blue.

And then let me just copy-paste that a couple of times.

So red,

yellow,

green,

and

brown.

And now we will of course have

to select all of them right here.

So again, you could have come up

with any blue color that you like.

My choice was this one, 2f6ee2.

So let's see.

And indeed, now it is blue.

Now, we'll just copy this a couple of times.

Okay.

So red,

yellow,

green,

and brown.

So not here, but here.

Here let's use the same red that I had before, actually.

And then the yellow was f0ef1e.

Green is 90cc20.

And finally the brown is 885214.

And there you go.

There we have all six different colors.

Now, all we need to do is to put them side by side.

So how can we do that?

Well, there is a neat trick that we learned before,

which is to change the display property

of these elements to inline block.

So we will now set all of these six elements.

So all of them, which have the class of color

to inline block.

Because like this, they will only occupy the space

that they need and they will also

not create any line breaks after them.

And so that is exactly what we want.

Now we could not use inline because

then the height and width wouldn't really work as expected.

Or at least they shouldn't.

And you see that indeed it doesn't work.

So it needs to be inline block

because remember height and width,

do not apply to inline elements.

And now all we need is a small margin

to the right of each of them

of let's say, 12 pixels.

And there we go.

It's a bit too much, maybe. So 10 pixels.

And that's it.

So that's all we need to do.

Well, actually we are missing

like some space here after this anchor.

And remember how we actually

already had this problem before.

So we tried to add some space.

So some margin bottom to this anchor, but it didn't work.

And so the work around was to then add that space

at the top of this heading.

Remember that?

So that's why here these details title, has the margin top.

And by the time we didn't understand

why adding margin bottom to this anchor element didn't work.

But now we actually do.

So let's do that as well.

So that's right here.

So let's add a margin bottom here of 30 pixels,

which will still not work.

But again, we now know why it doesn't work.

And the reason is that,

the anchor element is an inline element.

And on inline elements,

the top and margin bottoms do not apply.

So, to fix that once again,

we need to display this as an inline block.

So, easy enough.

Display inline block,

and there you go.

There we have, our 30 pixels now nicely displayed.

Okay.

And I think with this,

our solution looks exactly the same as our demo.

So we are done now as it looks.

Yep. So, it seems so.

And so, yeah.

That's actually a wraps up this introduction to CSS section.

So one more time, congratulations

for reaching this first part of the course.

And you now have all the fundamentals of HTML and CSS

that you need in order to start building layouts.

Which is actually one of the main parts of CSS.

So there's a whole section waiting about that.

And so once you're done reviewing everything

that we did here, I will see you in that next section.

Once you are ready.