Original subtitles

Let's continue working on

our very small shoe article project,

in this coding challenge number two.

So just like before, use the results

of the previous challenge

as the starting point for this one.

And if for some reason you don't have that code,

then as always,

I have the starter and the final code links

somewhere in this lecture, but it would be better of course,

if you would use your own code,

maybe if you have it on CodePen,

or if you're doing this challenge on your own computer

using VSCode, all right?

So, we ended up with this result

in the last coding challenge.

So remember it was this,

and what I want you to do now is to use your new knowledge

about the box model to arrive at this result.

So you see that this article here,

so this element is a lot more narrow now,

and it is also nicely centered in the page.

So the width of this container here,

so this article element is 825 pixels.

Next, you can see that many margins and paddings

have been removed and so that probably means

that there has been some global reset here.

So do that just like we did in one of the lectures,

but then of course keep adding back some paddings

and some margins.

So whenever you see some space here in this example,

for example, here, inside of this heading,

then of course you need to add back some space

and you can do that using margin or padding as you know,

so just choose the write one for the right situation

or according to what you learned.

Finally, another thing is that

this button here now is a really wide,

so it spans all the way

from the left side to the right side,

and also it now has this border here at the top

so to create this illusion of a button

even when we're hovering it.

So see if you can maybe arrive at this result,

but if you can't then that's of course,

as always not a big problem.

So just take some time now and really try

to code up this challenge and I see you back here

when you are done.

Okay.

So let's waste no time and start right away.

And I will actually start,

give us some more space here.

So I will start with that global reset I mentioned,

so adding a margin of zero and a padding of zero

to every single element on the page.

All right.

And now I will actually make this product here,

so this element, I will give it to the width of

825 pixels as I had mentioned before.

All right.

And so now it's time to center this in the browser.

And in the last lecture,

I actually showed you how to do that.

So there, we created an element that we called

the container, and then we centered that inside of the body.

Now, in this case, the container is basically

this product here, right?

And so that is where we add the width

and so that's where we also set now

the left and right margins to auto.

So I'm using the shorthand here and giving it

at the top and the bottom, zero

and then left and right, auto.

And so, here we go.

Now it is centered inside of the body.

Beautiful, but we can actually make this a bit better

because now it's kind of glued to the top here

and the same down here.

So instead of having top and bottom at zero,

let's set them to 50 pixels.

And so, that then creates some space basically

around this element.

So we added 50 here, down here, and 50 here at the top.

Great.

Next, let's add some space back here in the heading,

so that is the product title.

And so, now we want some space inside of the element

so that we can create some empty space here,

which still has some background color.

Right?

So that's why we use padding because we want

that space to be inside of the element

and not outside of it.

So if it was a margin,

then it would look like this

and then the background color would of course

not be anywhere here.

So because it's outside, right, we wanted inside

and so then that's padding.

All right.

So that's starting to look a lot better.

Now maybe let's create some space here

between this shipping and this text.

And so for that, so for creating some vertical space,

I am again using margin bottom.

So here in shipping, let's add

some

margin

bottom

of, let's say, 20 pixels.

Yeah, that looks a lot better

and let's take a look at the final result

that we want to achieve.

And so you see we have some space here as well.

We also have some space below this heading here,

and then this unordered list also moved back

here inside of the container,

because notice that right now, these bullets are outside.

Right?

And so let's not fix all of that.

So let's start with this one here

and giving it 15 pixels and as always,

if your numbers here were different

then that doesn't matter at all.

All right.

And now some space here between this link and this title,

so this heading and the logical thing to do

would probably be to add some margin bottom to the link,

because as I said,

the best thing to do is to stick to one of the directions,

so to one of the sides and then always add the margin there.

So let's try that.

So it's this more info link,

but you will see that this will actually not work.

So you see we added it and it doesn't work.

And the reason why it doesn't work

is something that I will explain in the next lecture.

All right.

So what matters now is that this doesn't work

because you basically cannot use margins

on small elements like anchors, so like this link.

And so instead, what we will do now

is to add a margin to the top

of this element.

And so this will then visually look exactly the same way.

Right, so adding 30 to the bottom of this,

it looks essentially the same as adding 30

to the top of this one.

Next, let's then fix

these bullet points that are outside of our

container element.

So margin left, let's say 20 pixels.

Yeah, so that looks nice.

And now I want to add some space here also

between these elements.

So that is this details list right here,

and so let's select each of these elements

that are in there.

So .details-list

and then all the li child elements

So this right here is a descendant selector,

just like we have learned previously

and as we have used many times before.

I think we have never used it

where one of them is a class selector like this

and the other is an element,

but of course that's no problem.

We can just combine them in any way that we want.

And so let's now add that space,

let's say some 10 pixels.

And now finally to finish,

let's work a little bit here on this button.

So this one, and I'm going to start with some padding here.

So adding some space inside of the button.

So that already looks a lot nicer, right?

But now let's have it go from one side

all the way to the other side.

So that's something very similar as we did with the image

in one of the previous lectures.

So we can simply give it a width of 100%.

And so now it basically occupies the entire parent element,

which is of course this complete article element.

And now all that we are missing is that border at the top.

Right, so remember that here in our demo, when we hover it,

then it still kind of looks like a button, right,

and in order to create that effect,

so that kind of illusion,

we need this border here at the top of the button.

So let's add that

and

so it is basically the same border

as goes around this article.

So let's see what we have there

and we can actually go ahead and copy it.

The only thing that we need to then change

is that we only want this border at the top, in this case.

Okay, and now there we go.

So beautiful, that works just nice.

And I think with this, we actually finished this challenge.

So it looks just like, our demo here.

So I think we're done here with this challenge.

So great job, well done and congratulations

for writing a lot of code on your own once again.

So these are really, really important for you to

consolidate your knowledge.

So I'm very happy to see

that you're still with me here at this point,

because that's really great progress.