All language subtitles for 0013 CHALLENGE #1_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.