-: It's good to have you back,
and to welcome you to your very first challenge
of this section,
and in this one we will continue building
on the code that we already built
in the HTML fundamental section.
So, after our first big challenge,
we ended up with this code.
So, with this project here, remember?
And so, what I want you to do now, is to build
on this project in order to achieve this, basically.
So, here you see that we have some text in uppercase.
This one and this one.
There is some gray background color between this heading.
You also see that there are some special styles here.
This text is way larger.
The button is styled like this.
So, when we hover it,
and also the link is styled differently.
There is a big black border around the entire component.
So, this entire article element, and I think that's it.
Also, these list icons here are now square
and to achieve this, you can experiment
with different values of the list style property
but this one is also not really important.
So, what's really important is this hover style.
So, basically the link on itself is black
and then once we hover it,
all that happens is that the underline disappears.
Then down here, remember that this is actually
a button element and buttons can also have hover states.
Now, unlike links,
they do not have the link or visited pseudo class
but you can still specify styles for the hover pseudo class,
and so what I want you to do is that,
when we hover this button,
is basically to invert the colors.
So, the background was black and now it's white,
and the text was white before and now it is black.
So, a nice effect like this,
and don't really worry about the correct colors
and about the correct font sizes here.
So, just use any values for now
because my goal with this is
that you really practice the properties themselves
and the values are not really what matters.
Okay?
So, as a starting point for this challenge,
please use the code that you ended up with
after your last coding challenge.
So, after the end of the HTML Fundamentals section
and if, for some reason, you don't have that code anymore,
or if you didn't do that challenge,
then I will also include a link in this video
where you can find the starter code,
so that you can start working from there.
So, this is kind of a big challenge,
so it should take you at least, probably half an hour,
maybe a bit more, to finish this,
and it's not a problem at all if you have to go back
to the code that we wrote together during the lectures.
So, you don't have to have memorized all
of the property names at this point.
It's completely normal
if you need to look some of them up, okay?
So, don't feel bad for doing that.
What I want you to do is to write some CSS on your own,
and I'm sure that you will do that.
So, see you back here once you are ready.
Welcome back,
and I hope that you had a great time solving this challenge,
and that you had a lot of fun,
and let's not waste any time and get to work right away.
And I will start with the body,
and I will give it a sans serif font family.
So, sans serif,
and so, as we learned in the last lecture,
this font family you set to sans serif
will now be inherited to all of the other elements.
All right.
And so that, already, in itself, is a big change.
Now, another thing that I want to do here,
and this one was not mandatory for you
because I actually didn't even mention it,
but I want to increase the line height here,
and this is another one of those properties
that actually does get inherited,
and by adding some line height here,
between all the elements,
we get a little bit more breathing space here,
between especially these li elements now, okay?
And now, let's simply start working from the top
to the bottom of this HTML code here.
So, starting with the article we'll start
by adding that black border around it.
So here, let's give it a class of product
and I will now start using classes on every single element,
but once again, you wouldn't have to do it exactly that way.
So, if your result looks the same as mine,
then there is no need to change anything.
All right.
So, I used a four pixel here, maybe use something else,
but that's not really important.
Okay, nice.
Now, here we have this h2,
so, I'm calling that the product title.
So, product title,
and let's take a look here.
So, the text is in the center,
there is this background color and it is uppercase.
So, let's do that.
Text align of center, a font size,
let's say of 22 pixels.
Then, it was also upper case, right?
So, that's text transform uppercase,
and finally that subtle background color that we had,
and I will use again the one from the lectures, F7F7F7,
and indeed, that looks quite nice,
and so, let's move on to the next one.
Let's just add some comments here,
to make it easier to understand,
and here in CodePen, actually,
the exact same shortcut works as in VS code,
so, that's comment or control slash.
All right.
So, next up, let's make the text a little bit bigger
and let's also change this free shipping label here.
So, you see that, yeah, the price is bigger
and then this free shipping here
is kind of just a label, right?
And this will actually make a bit more sense
once we transform this into a nice layout,
but what matters is that the text is quite small
and uppercase and a lighter gray.
So, let's do all of that now.
So, this one is called price and this one shipping.
So, notice how I'm doing this quite fast here, at this point
because we already learned about all of these properties
and I'm really just trying to solve the challenge here,
together with you,
which you hopefully already did on your own before.
So, this is more like to review.
I like to review most of the stuff
that we already did before.
So, I'm calling this kind of section of our code, here,
product information and then price,
and here, let's say we want a font size of 24 pixels.
Nice.
And now, as for the shipping.
So, shipping
and also notice how I'm only ever using classes,
and never IDs,
and so again, that's to basically future-proof our code,
such as I explained in one of the earlier lectures
in this section, right?
So, the font size here is a bit on the small side.
So, 12 pixels.
Remember that's uppercase,
and now what else do we have?
The font weight was also bold,
and let's see what else.
Ah, yeah, we have this, like, lighter color.
So, let's use a 777 here,
and this color you could have, like,
come up with in the VS Code color picker, right?
For me, this value is just already
like a default in my head, when I need a lighter gray color,
and for you, of course, this will also come with practice.
All right.
Now anyway, let's move on to the link here.
So, that's this one, here.
Calling this one more info.
So, more info,
and now remember that this is a link
and it does have a href property, and so therefore,
here we should now use the link pseudo class.
Okay.
So, that's the best practice always,
to actually style the different link states.
So, the only thing that actually changes is the color,
which should become black if I remember it correctly.
All right,
and the hover state is the same,
with the only difference that the underline is gone
and the same for the active.
So, I just clicked and it still looks the same.
So, let's translate that into code.
So, hover, and now what I set,
is that text decoration is none,
and I also set that the same is true for the active,
and so instead of just copying this rule,
I can just copy the selector and do this as a list.
So, I want this to happen on hover and on active and,
and hopefully you notice,
that we are actually missing one of the states,
and so let's simply add that here.
So, that's the visited state.
So, I mentioned before that we should always specify
all the four states and always in this order.
So, first link, then visited, then hover, and then active,
and in this case the link
and the visited state happened to be the same,
and the same goes for hover and active,
and so that works nicely, just as expected.
Okay.
So, this section here of the code
is basically the product information,
and now, down here, we have kind of the product details.
So, all of this here, we can call it product details.
So, let's add like another separator here
inside of our code,
and so this is nice to visually divide
our code into different sections.
Here we have the details title,
and then let's call the list the details list.
Okay, let's grab this from here,
so we don't have to write it all over again,
and then here's the list,
and actually let's start with that.
So, I told you to experiment a little bit
with the list style property
which doesn't really work here in CodePen.
I mean the experimenting,
because the values do not show up
like they do in VS Code,
but maybe you did it in VS Code,
and there you could see that one of the options
is to set it to square,
and so then it looks like this.
So, it fits nicely the rest of our kind of boxy layout here.
Okay.
And then here, the product details,
let's just make it uppercase, like the other heading.
So, text transform, upper case,
and a font size of 16 pixels.
Okay, beautiful.
That looks already almost the same except here,
for the button,
and so, that should be easy as well.
So, let's create a new section here,
just for the button
and in this very small piece of code.
Now, of course it wouldn't be necessary to do it like this,
so to add all of these comments here,
but I just want you to start to get into the habit
of organizing your own code a little bit.
Okay.
So, this button here, I'm calling it add cart,
and now let's start with the background color set to black.
Let's see.
But now we get this very ugly border that you see here.
So, I don't know if we actually did this before,
probably we didn't,
so it's not a big deal of course,
if you didn't do this part here.
So, setting the border to none,
but anyway, the color we should set to white,
and so we can do that using the CSS color name
or we could, of course, do the hex code.
So, the hexadecimal notation of fff,
which is exactly the same thing.
Then, let's make it a bigger.
Font size, 20 pixels,
and again, a text transform of 20.
Well, not of 20 pixels of course, but of uppercase.
Nice.
So, I think that looks the same,
and now we just need the opposite, basically.
Oh, and we also need to add, like this cursor here.
So, this pointer, so the, like the hand,
cause usually on a button, that doesn't appear by default.
So, this is certainly a property I didn't show you before
but let me show it to you now.
So, we can set the cursor to pointer,
and so now it looks like a link.
So, you see now we have the hand here just like we had here.
Great, and now as I told you before,
you can now set the hover pseudo class.
All right.
Cause this is a button and we can of course hover it,
and so we can specify the hover pseudo class,
and actually we can do that on all elements
but usually it doesn't make a lot of sense.
So, anyway, all we want to do here
is basically to invert the colors.
So, now the color should be black,
and to keep it consistent
let's use the hexadecimal notation,
and the same here.
So, I like to keep things consistent in this way,
and then the background color
should now be white.
Okay.
And indeed that works.
So, I think that with this, our project here
now looks exactly the same as the demo code.
Great.
So, I hope that wasn't too hard
and that you had some fun
and that you were able to do at least some of it.
So, in case you need to, like compare your code with mine,
I will include a link to the final code
of this challenge somewhere into this lecture,
and with that being said,
I'll see you in the next lecture,
which is one of the most important ones of this section.