Original subtitles

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 upper case,

this one, 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 fundamental 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 is set to sans-serif will now be inherited

to all of the other elements, alright?

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 property

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.

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 uppercase, 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 VSCode, so that's command 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'll see that, yeah, the price is bigger.

And then this free shipping here is kind of a, 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,

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 the 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?

Oh 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 VSCode 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.

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 said is that text decoration

is none and I also said 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 hopefully you noticed 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 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 VSCode,

but maybe you did it in VSCode

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 habits

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 bit 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.

because 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 it.

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, because 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.