-: 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 coding challenge number two.
And so as always, keep this as a starting point,
which hopefully you have on some code pen
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 this 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 see you once you're done.
Alright, 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 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 E-C-2-F-2-F,
just like this.
Let's 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.
Seven pixels at the top, fifteen 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.
So 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 the 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 width
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 aligned 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 it 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 at the top and left to zero just to get started.
Okay.
And now we can kind of guess to values where this should be.
So let's say, like, minus 15 pixels.
That can be a little bit more, like 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 of the top.
Alright, 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've Googled is:
CSS add space between characters.
Or you could have written letters as well
but here you actually immediately get the result.
So letter 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 going to 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, I 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.
Alright.
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 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.
Alright.
But right now they're 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, while 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'd like.
My choice was this one, 2-F-6-E-E-2.
So let's see.
And indeed now it is blue.
I will 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 F-0-B-F-1-E.
Green is 9-0-C-C-2-0.
And finally the brown is 8-8-5-2-1-4.
And there you go.
There we have our 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 workaround was to then add that space
at the top of this heading.
Remember that?
So that's why here, this 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 seems so.
And so, yeah, that actually 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.