Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,500 --> 00:00:04,780
It's good to have you back and to welcome you
2
00:00:04,780 --> 00:00:08,560
to your very first challenge of this section.
3
00:00:08,560 --> 00:00:12,100
And in this one, we will continue building on the code
4
00:00:12,100 --> 00:00:15,623
that we already built in the HTML fundamental section.
5
00:00:17,260 --> 00:00:19,810
So after our first big challenge,
6
00:00:19,810 --> 00:00:22,020
we ended up with this code.
7
00:00:22,020 --> 00:00:24,890
So with this project here, remember,
8
00:00:24,890 --> 00:00:28,880
and so what I want you to do now is to build on this project
9
00:00:28,880 --> 00:00:33,330
in order to achieve this, basically.
10
00:00:33,330 --> 00:00:37,470
So here you see that we have some text in upper case,
11
00:00:37,470 --> 00:00:39,840
this one, this one,
12
00:00:39,840 --> 00:00:44,470
there is some gray background color between this heading.
13
00:00:44,470 --> 00:00:48,670
You also see that there are some special styles here.
14
00:00:48,670 --> 00:00:50,903
This text is way larger.
15
00:00:51,900 --> 00:00:54,563
The button is styled like this.
16
00:00:55,400 --> 00:00:59,253
So when we hover it and also the link is styled differently.
17
00:01:00,970 --> 00:01:05,710
There is a big black border around the entire component.
18
00:01:05,710 --> 00:01:10,710
So this entire article element, and I think that's it.
19
00:01:12,080 --> 00:01:15,430
Also, these list icons here are now square.
20
00:01:15,430 --> 00:01:17,900
And to achieve this, you can experiment
21
00:01:17,900 --> 00:01:21,930
with different values of the list style property,
22
00:01:21,930 --> 00:01:24,940
but this one is also not really important.
23
00:01:24,940 --> 00:01:28,883
So what's really important is this hover style.
24
00:01:29,750 --> 00:01:33,220
So basically the link on itself is black.
25
00:01:33,220 --> 00:01:34,680
And then once we hover it,
26
00:01:34,680 --> 00:01:38,740
all that happens is that the underline disappears.
27
00:01:38,740 --> 00:01:41,600
Then down here, remember that this is actually
28
00:01:41,600 --> 00:01:46,600
a button element and buttons can also have hover states.
29
00:01:46,730 --> 00:01:49,670
Now, unlike links, they do not have the link
30
00:01:49,670 --> 00:01:51,630
or visited pseudo-class,
31
00:01:51,630 --> 00:01:56,290
but you can still specify styles for the hover pseudo-class.
32
00:01:56,290 --> 00:01:58,580
And so what I want you to do is that
33
00:01:58,580 --> 00:02:02,950
when we hover this button is basically to invert the colors.
34
00:02:02,950 --> 00:02:06,280
So the background was black and now it's white
35
00:02:06,280 --> 00:02:10,530
and the text was white before, and now it is black.
36
00:02:10,530 --> 00:02:13,230
So a nice effect like this,
37
00:02:13,230 --> 00:02:16,450
and don't really worry about the correct colors
38
00:02:16,450 --> 00:02:19,020
and about the correct font sizes here.
39
00:02:19,020 --> 00:02:21,250
So just use any values for now,
40
00:02:21,250 --> 00:02:24,120
because my goal with this is that you really practice
41
00:02:24,120 --> 00:02:27,280
the properties themselves and the values
42
00:02:27,280 --> 00:02:29,230
are not really what matters.
43
00:02:29,230 --> 00:02:30,440
Okay?
44
00:02:30,440 --> 00:02:33,100
So as a starting point for this challenge,
45
00:02:33,100 --> 00:02:36,230
please use the code that you ended up with
46
00:02:36,230 --> 00:02:38,950
after your last coding challenge.
47
00:02:38,950 --> 00:02:43,200
So after the end of the HTML fundamental section,
48
00:02:43,200 --> 00:02:45,960
and if for some reason you don't have that code anymore,
49
00:02:45,960 --> 00:02:47,850
or if you didn't do that challenge,
50
00:02:47,850 --> 00:02:51,260
then I will also include a link in this video
51
00:02:51,260 --> 00:02:53,140
where you can find the starter code,
52
00:02:53,140 --> 00:02:56,130
so that you can start working from there.
53
00:02:56,130 --> 00:02:58,550
So this is kind of a big challenge.
54
00:02:58,550 --> 00:03:01,990
So it should take you at least probably half an hour,
55
00:03:01,990 --> 00:03:04,730
maybe a bit more to finish this.
56
00:03:04,730 --> 00:03:06,950
And it's not a problem at all,
57
00:03:06,950 --> 00:03:10,270
If you have to go back to the code that we wrote together
58
00:03:10,270 --> 00:03:11,730
during the lectures.
59
00:03:11,730 --> 00:03:14,310
So you don't have to have memorized
60
00:03:14,310 --> 00:03:16,940
all of the property names at this point.
61
00:03:16,940 --> 00:03:20,330
It's completely normal if you need to look some of them up.
62
00:03:20,330 --> 00:03:21,280
Okay.
63
00:03:21,280 --> 00:03:23,210
So don't feel bad for doing that.
64
00:03:23,210 --> 00:03:26,610
What I want you to do is to write some CSS on your own,
65
00:03:26,610 --> 00:03:28,770
and I'm sure that you will do that.
66
00:03:28,770 --> 00:03:31,403
So see you back here, once you are ready.
67
00:03:34,000 --> 00:03:35,350
Welcome back!
68
00:03:35,350 --> 00:03:39,530
And I hope that you had a great time solving this challenge
69
00:03:39,530 --> 00:03:43,490
and that you had a lot of fun and let's not waste any time
70
00:03:43,490 --> 00:03:45,790
and get to work right away.
71
00:03:45,790 --> 00:03:48,670
And I will start with the body
72
00:03:48,670 --> 00:03:51,493
and I will give it a sans-serif font family.
73
00:03:55,010 --> 00:03:57,563
So, sans-serif.
74
00:03:58,420 --> 00:04:01,050
And so, as we learned in the last lecture,
75
00:04:01,050 --> 00:04:05,260
this font family is set to sans-serif will now be inherited
76
00:04:05,260 --> 00:04:09,030
to all of the other elements, alright?
77
00:04:09,030 --> 00:04:11,883
And so that already in itself is a big change.
78
00:04:12,790 --> 00:04:15,500
Now, another thing that I want to do here,
79
00:04:15,500 --> 00:04:18,329
and this one was not mandatory for you
80
00:04:18,329 --> 00:04:20,920
because I actually didn't even mention it,
81
00:04:20,920 --> 00:04:23,890
but I want to increase the line height here.
82
00:04:23,890 --> 00:04:26,310
And this is another one of those property
83
00:04:26,310 --> 00:04:28,950
that actually does get inherited.
84
00:04:28,950 --> 00:04:30,580
And by adding some line height here
85
00:04:30,580 --> 00:04:33,480
between all the elements,
86
00:04:33,480 --> 00:04:36,810
we get a little bit more breathing space here between,
87
00:04:36,810 --> 00:04:39,600
especially these LI elements.
88
00:04:39,600 --> 00:04:43,740
Okay, and now let's simply start working from the top
89
00:04:43,740 --> 00:04:47,381
to the bottom of this HTML code here.
90
00:04:47,381 --> 00:04:49,340
So starting with the article,
91
00:04:49,340 --> 00:04:53,463
we'll start by adding that black border around it.
92
00:04:55,190 --> 00:04:59,450
So here, let's give it a class of product
93
00:05:01,360 --> 00:05:05,083
and I will now start using classes on every single element.
94
00:05:06,100 --> 00:05:10,980
But once again, you wouldn't have to do it exactly that way.
95
00:05:10,980 --> 00:05:13,470
So if your result looks the same as mine,
96
00:05:13,470 --> 00:05:16,130
then there is no need to change anything.
97
00:05:16,130 --> 00:05:17,320
All right.
98
00:05:17,320 --> 00:05:19,503
So I used a four pixel here.
99
00:05:20,910 --> 00:05:24,313
Maybe use something else, but that's not really important.
100
00:05:25,660 --> 00:05:27,293
Okay, nice.
101
00:05:28,270 --> 00:05:29,860
Now, here we have this h2,
102
00:05:29,860 --> 00:05:34,687
so I'm calling that the "product title".
103
00:05:41,790 --> 00:05:46,790
So product title, and let's take a look here.
104
00:05:48,740 --> 00:05:50,700
So the text is in the center.
105
00:05:50,700 --> 00:05:53,883
There is this background color and it is uppercase.
106
00:05:55,320 --> 00:05:56,623
So let's do that.
107
00:05:58,290 --> 00:06:00,923
Text align of center,
108
00:06:03,490 --> 00:06:07,273
a font size, let's say, of 22 pixels,
109
00:06:08,140 --> 00:06:11,093
then it was also uppercase, right?
110
00:06:13,050 --> 00:06:17,770
So that's text transform uppercase,
111
00:06:17,770 --> 00:06:22,770
and finally that subtle background color that we had.
112
00:06:22,900 --> 00:06:26,300
And I will use again the one from the lectures, F7F7F7.
113
00:06:29,130 --> 00:06:32,670
And indeed, that looks quite nice.
114
00:06:32,670 --> 00:06:34,883
And so let's move on to the next one.
115
00:06:36,070 --> 00:06:37,720
Let's just add some comments here
116
00:06:39,900 --> 00:06:42,350
to make it easier to understand.
117
00:06:42,350 --> 00:06:46,610
And here in CodePen, actually the exact same shortcut works
118
00:06:46,610 --> 00:06:51,610
as in VSCode, so that's command or control slash, all right.
119
00:06:55,090 --> 00:06:59,250
So next up, let's make the text a little bit bigger
120
00:06:59,250 --> 00:07:03,083
and let's also change this free shipping label here.
121
00:07:04,150 --> 00:07:06,940
So you'll see that, yeah, the price is bigger.
122
00:07:06,940 --> 00:07:11,620
And then this free shipping here is kind of a, just a label,
123
00:07:11,620 --> 00:07:12,453
Right?
124
00:07:12,453 --> 00:07:14,430
And this will actually make a bit more sense
125
00:07:14,430 --> 00:07:17,673
once we transform this into a nice layout,
126
00:07:18,660 --> 00:07:21,010
but what matters is that the text is quite small
127
00:07:21,010 --> 00:07:23,880
and uppercase and a lighter gray.
128
00:07:23,880 --> 00:07:25,673
So let's do all of that now.
129
00:07:26,610 --> 00:07:30,927
So this one is called "price" and this one, "shipping".
130
00:07:33,080 --> 00:07:37,350
So notice how I'm doing this quite fast here at this point,
131
00:07:37,350 --> 00:07:40,620
because we already learned about all of these properties
132
00:07:40,620 --> 00:07:44,570
and I'm really just trying to solve the challenge here
133
00:07:44,570 --> 00:07:49,290
together with you which you hopefully already did
134
00:07:49,290 --> 00:07:50,373
on your own before.
135
00:07:51,820 --> 00:07:52,823
So this is more,
136
00:07:55,940 --> 00:07:58,100
I like to review most of the stuff
137
00:07:58,100 --> 00:08:00,130
that we already did before.
138
00:08:00,130 --> 00:08:03,450
So I'm calling this kind of section of our code here,
139
00:08:03,450 --> 00:08:08,400
product information and then price.
140
00:08:08,400 --> 00:08:13,400
And here let's say we want a font size of 24 pixels.
141
00:08:15,330 --> 00:08:16,163
Nice.
142
00:08:17,470 --> 00:08:19,713
And now, as for the shipping,
143
00:08:21,650 --> 00:08:26,650
so shipping and also notice how I'm only ever using classes
144
00:08:26,900 --> 00:08:28,490
and never IDs.
145
00:08:28,490 --> 00:08:32,360
And so again, that's to basically future proof our code,
146
00:08:32,360 --> 00:08:35,350
such as I explained in one of the earlier lectures
147
00:08:35,350 --> 00:08:38,260
in the section, right?
148
00:08:38,260 --> 00:08:42,250
So the font size here is a bit on the small side.
149
00:08:42,250 --> 00:08:43,803
So 12 pixels.
150
00:08:48,510 --> 00:08:50,423
Remember that's uppercase.
151
00:08:56,110 --> 00:08:58,593
And now what else do we have?
152
00:09:01,200 --> 00:09:03,373
The font weight was also bold.
153
00:09:05,440 --> 00:09:08,060
And let's see what else?
154
00:09:08,060 --> 00:09:10,963
Oh yeah, we have this like lighter color.
155
00:09:12,260 --> 00:09:17,260
So, let's use a 777 here.
156
00:09:17,290 --> 00:09:20,680
And this color, you could have like come up with
157
00:09:20,680 --> 00:09:23,710
in the VSCode color picker, right?
158
00:09:23,710 --> 00:09:27,080
For me, this value is just already like a default
159
00:09:27,080 --> 00:09:30,280
in my head when I need a lighter gray color.
160
00:09:30,280 --> 00:09:33,533
And for you, of course, this will also come with practice.
161
00:09:34,590 --> 00:09:36,170
All right.
162
00:09:36,170 --> 00:09:39,870
Now, anyway, let's move on to the link here.
163
00:09:39,870 --> 00:09:41,933
So that's this one here.
164
00:09:46,010 --> 00:09:48,457
Calling this one, "more info",
165
00:09:52,320 --> 00:09:55,520
so, more info.
166
00:09:55,520 --> 00:09:58,730
And now remember that this is a link
167
00:09:58,730 --> 00:10:01,420
and it does have a href property.
168
00:10:01,420 --> 00:10:03,960
And so therefore, here we should now use
169
00:10:03,960 --> 00:10:08,660
the link pseudo-class, okay?
170
00:10:08,660 --> 00:10:10,230
So that's the best practice.
171
00:10:10,230 --> 00:10:14,340
Always to actually style the different link states.
172
00:10:14,340 --> 00:10:18,240
So the only thing that actually changes is the color,
173
00:10:18,240 --> 00:10:23,103
which should become black if I remember it correctly.
174
00:10:24,860 --> 00:10:26,430
Right?
175
00:10:26,430 --> 00:10:29,480
And the hover state is the same with the only difference
176
00:10:29,480 --> 00:10:33,720
that the underline is gone and the same for the active.
177
00:10:33,720 --> 00:10:36,663
So I just clicked and it still looks the same.
178
00:10:38,090 --> 00:10:41,073
So let's translate that into code.
179
00:10:46,810 --> 00:10:51,810
So, hover, and now what I said is that text decoration
180
00:10:54,680 --> 00:10:58,940
is none and I also said that the same is true
181
00:10:58,940 --> 00:11:03,810
for the active and so instead of just copying this rule,
182
00:11:03,810 --> 00:11:07,513
I can just copy the selector and do this as a list.
183
00:11:09,250 --> 00:11:14,250
So I want this to happen on hover and on active.
184
00:11:14,589 --> 00:11:18,430
And hopefully you noticed that we are actually missing
185
00:11:18,430 --> 00:11:19,910
one of the states.
186
00:11:19,910 --> 00:11:22,640
And so let's simply add that here.
187
00:11:22,640 --> 00:11:24,863
So that's the visited state.
188
00:11:26,210 --> 00:11:29,740
So I mentioned before that we should always specify
189
00:11:29,740 --> 00:11:33,030
all the four states and always in this order.
190
00:11:33,030 --> 00:11:38,030
So, first link, then visited, then hover and then active.
191
00:11:38,430 --> 00:11:42,400
And in this case, the link and the visited state happened
192
00:11:42,400 --> 00:11:46,223
to be the same and the same goes for hover and active.
193
00:11:47,490 --> 00:11:50,823
And so that works nicely just as expected.
194
00:11:51,660 --> 00:11:52,493
Okay.
195
00:11:53,660 --> 00:11:57,090
So this section here of the code is basically
196
00:11:57,090 --> 00:11:59,230
the product information.
197
00:11:59,230 --> 00:12:03,250
And now down here, we have kind of the product details.
198
00:12:03,250 --> 00:12:07,240
So all of this here, we can call it product details.
199
00:12:07,240 --> 00:12:11,043
So let's add like another separator here inside of our code.
200
00:12:12,590 --> 00:12:17,070
And so this is nice to visually divide our code
201
00:12:17,070 --> 00:12:18,893
into different sections.
202
00:12:19,790 --> 00:12:23,363
Here, we have the details title,
203
00:12:28,740 --> 00:12:33,740
and then let's call the list, the details list.
204
00:12:37,010 --> 00:12:39,190
Okay, let's grab this from here.
205
00:12:39,190 --> 00:12:42,033
So we don't have to write it all over again.
206
00:12:44,940 --> 00:12:49,940
And then here the list, and actually let's start with that.
207
00:12:50,250 --> 00:12:52,650
So I told you to experiment a little bit
208
00:12:52,650 --> 00:12:55,070
with the list style property,
209
00:12:55,070 --> 00:12:58,000
which doesn't really work here in CodePen.
210
00:12:58,000 --> 00:13:02,500
I mean the experimenting, because the values do not show up,
211
00:13:02,500 --> 00:13:04,230
like they do in VSCode,
212
00:13:04,230 --> 00:13:06,210
but maybe you did it in VSCode
213
00:13:06,210 --> 00:13:08,930
and there you could see that one of the options
214
00:13:08,930 --> 00:13:10,710
is to set it to square.
215
00:13:10,710 --> 00:13:14,900
And so then it looks like this, so it fits nicely
216
00:13:14,900 --> 00:13:17,973
the rest of, our kind of boxy layout here.
217
00:13:19,660 --> 00:13:20,700
Okay.
218
00:13:20,700 --> 00:13:23,890
And then here, the product details,
219
00:13:23,890 --> 00:13:28,060
let's just make it uppercase like the other heading.
220
00:13:28,060 --> 00:13:33,060
So, text transform upper case
221
00:13:33,420 --> 00:13:37,543
and a font size of 16 pixels.
222
00:13:39,310 --> 00:13:41,660
Okay, beautiful.
223
00:13:41,660 --> 00:13:44,050
That looks already almost the same
224
00:13:44,050 --> 00:13:46,590
except here for the button.
225
00:13:46,590 --> 00:13:50,620
And so that should be easy as well.
226
00:13:50,620 --> 00:13:53,820
So let's create a new section here
227
00:13:57,490 --> 00:14:01,980
just for the button and in this very small piece of code.
228
00:14:01,980 --> 00:14:05,100
Now, of course it wouldn't be necessary to do it like this.
229
00:14:05,100 --> 00:14:07,350
So to add all of these comments here,
230
00:14:07,350 --> 00:14:10,550
but I just want you to start to get into the habits
231
00:14:10,550 --> 00:14:13,420
of organizing your own code a little bit.
232
00:14:13,420 --> 00:14:14,253
Okay?
233
00:14:15,710 --> 00:14:18,937
So this button here, I'm calling it "add cart".
234
00:14:23,890 --> 00:14:28,790
And now let's start with the background color, set to black.
235
00:14:32,190 --> 00:14:33,750
Let's see.
236
00:14:33,750 --> 00:14:37,283
But now we get this very ugly border that you see here.
237
00:14:38,120 --> 00:14:41,120
So I don't know if we actually did this before.
238
00:14:41,120 --> 00:14:43,040
Probably, we didn't.
239
00:14:43,040 --> 00:14:44,840
So it's not a big deal, of course,
240
00:14:44,840 --> 00:14:47,620
if you didn't do this part here,
241
00:14:47,620 --> 00:14:49,463
so setting the border to none.
242
00:14:52,980 --> 00:14:56,790
But anyway, the color we should set to white.
243
00:14:56,790 --> 00:15:00,100
And so we can do that using the CSS color name,
244
00:15:00,100 --> 00:15:03,410
or we could of course do the hex code.
245
00:15:03,410 --> 00:15:06,910
So the hexadecimal notation of FFF
246
00:15:06,910 --> 00:15:08,763
which is exactly the same thing.
247
00:15:09,920 --> 00:15:11,903
Then let's make it a bit bigger.
248
00:15:12,740 --> 00:15:15,190
Font size, 20 pixels
249
00:15:18,540 --> 00:15:22,290
and again, a text transform of 20,
250
00:15:22,290 --> 00:15:26,827
well, not of 20 pixels, of course, but of uppercase.
251
00:15:28,940 --> 00:15:32,770
Nice, so I think that looks the same.
252
00:15:32,770 --> 00:15:35,470
And now we just need the opposite basically.
253
00:15:35,470 --> 00:15:39,910
Oh, and we also need to add like this cursor here.
254
00:15:39,910 --> 00:15:43,040
So this pointer, so the, like the hand.
255
00:15:43,040 --> 00:15:46,513
because usually on a button, that doesn't appear by default.
256
00:15:47,550 --> 00:15:51,070
So this is certainly a property I didn't show you before,
257
00:15:51,070 --> 00:15:52,600
but let me show it to you now.
258
00:15:52,600 --> 00:15:57,290
So we can set the cursor to pointer.
259
00:15:57,290 --> 00:15:59,780
And so now it looks like a link.
260
00:15:59,780 --> 00:16:00,613
So you see it.
261
00:16:00,613 --> 00:16:03,403
Now we have the hand here just like we had here.
262
00:16:05,730 --> 00:16:08,530
Great! And now, as I told you before,
263
00:16:08,530 --> 00:16:12,693
you can now set the hover pseudo-class.
264
00:16:17,110 --> 00:16:19,420
All right, because this is a button
265
00:16:19,420 --> 00:16:21,060
and we can of course hover it.
266
00:16:21,060 --> 00:16:24,100
And so we can specify the hover pseudo-class.
267
00:16:24,100 --> 00:16:27,390
And actually, we can do that on all elements
268
00:16:27,390 --> 00:16:30,470
but usually, it doesn't make a lot of sense.
269
00:16:30,470 --> 00:16:33,120
So anyway, all we want to do here is basically
270
00:16:33,120 --> 00:16:35,050
to invert the colors.
271
00:16:35,050 --> 00:16:40,050
So now the color should be black and to keep it consistent,
272
00:16:40,210 --> 00:16:45,210
let's use the hexadecimal notation, and the same here.
273
00:16:45,220 --> 00:16:48,363
So I like to keep things consistent in this way.
274
00:16:49,320 --> 00:16:54,000
And then the background color should now be white.
275
00:16:59,950 --> 00:17:04,690
Okay, and indeed, that works.
276
00:17:04,690 --> 00:17:06,203
So I think that with this,
277
00:17:07,190 --> 00:17:09,940
our project here now looks exactly the same
278
00:17:09,940 --> 00:17:11,403
as the demo code.
279
00:17:12,359 --> 00:17:13,640
Great!
280
00:17:13,640 --> 00:17:17,770
So I hope that wasn't too hard and that you had some fun
281
00:17:17,770 --> 00:17:21,270
and that you were able to do at least some of it.
282
00:17:21,270 --> 00:17:25,940
So, in case you need to like, compare your code with mine,
283
00:17:25,940 --> 00:17:29,500
I will include a link to the final code of this challenge
284
00:17:29,500 --> 00:17:31,880
somewhere into this lecture.
285
00:17:31,880 --> 00:17:35,030
And with that being said, I'll see you in the next lecture,
286
00:17:35,030 --> 00:17:38,563
which is one of the most important ones of this section.
21521
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.