Jonas: 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 VS Code.
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 right one for the right situation
or according to what you learned.
Finally, another thing is that this button here
now is 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'll see you back here when you are done.
Okay.
So let's waste no time and start right away.
And I will actually start...
Let's 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 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 but we want it 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 now 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
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 gonna 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.