WEBVTT 0 00:00.290 --> 00:00.680 All right. 1 00:00.680 --> 00:04.220 So now it's time for our final project of the section. 2 00:04.220 --> 00:09.320 And in this project, we're going to be building a website to help you learn Spanish. 3 00:09.440 --> 00:14.900 Now, you might already know Spanish, but I'm currently learning Spanish, and there's so much vocab 4 00:14.900 --> 00:15.760 to get through. 5 00:15.770 --> 00:21.050 I thought, why don't we build a vocabulary flashcard website? 6 00:21.050 --> 00:22.820 But a really, really simple one 7 00:22.820 --> 00:30.650 using everything we know so far. In this project, we're going to be creating a website where we list 8 00:30.680 --> 00:34.400 the words in, well, in this case in Spanish. 9 00:34.400 --> 00:40.370 It could be any other language you choose, and we're going to match it with an image of a particular 10 00:40.370 --> 00:44.300 color so that we learn all the colors in our foreign language. 11 00:44.480 --> 00:47.450 This is what the final website should look like. 12 00:47.450 --> 00:55.370 We've got our word which is foreign in the color that matches the image 13 00:55.370 --> 01:02.640 and we've got our images all lined up as nice little squares so that we can scroll through this website 14 01:02.640 --> 01:05.160 and learn the words for the colors in Spanish. 15 01:05.340 --> 01:11.700 Once you're ready, go ahead and download the Color Vocab Project starting files, extract it, and open 16 01:11.700 --> 01:16.800 it up inside VS Code. In the index.html, 17 01:16.830 --> 01:20.330 y ou'll see that I've already set you up with some starting code. 18 01:20.340 --> 01:29.460 If you go ahead and show it as a preview, you'll see some words for the colors in Spanish and the different 19 01:29.460 --> 01:31.520 images for the different colors. 20 01:31.530 --> 01:34.650 Now don't worry about the fact the images are all different sizes. 21 01:34.650 --> 01:38.490 We're going to fix that with CSS very soon in the project. 22 01:38.700 --> 01:46.320 First thing to note is we've already set you up with a link to an external stylesheet which is inside 23 01:46.320 --> 01:48.210 style.css, 24 01:48.210 --> 01:55.680 but notice that we haven't created that file for you. So I want you to create a new file inside the 25 01:55.680 --> 02:03.450 correct location by using this button in VS Code and then name it once you've created it so that it 26 02:03.450 --> 02:04.560 actually works. 27 02:04.560 --> 02:11.670 And one of the things that I often check to make sure that my external CSS is linked up is to target 28 02:11.670 --> 02:17.790 everything on the page and to set the background-color to red. 29 02:17.820 --> 02:24.330 That way you know that if actually it does work, then it's linked up correctly and it's really obvious 30 02:24.330 --> 02:26.460 when it doesn't like right now. 31 02:26.460 --> 02:32.070 And the reason here is because my style.css is actually outside this folder. 32 02:32.070 --> 02:39.000 It's just floating about somewhere and I have to get it so that it's at the location that I specified 33 02:39.000 --> 02:41.580 in the external stylesheet link. 34 02:41.580 --> 02:47.250 So I don't want you to change anything inside the index.html. 35 02:47.250 --> 02:55.080 Instead, all of your work is going to happen inside the CSS file, which you will create and you will 36 02:55.080 --> 03:03.270 incorporate into your project using this file path to make sure that you understand how file paths work 37 03:03.270 --> 03:06.330 and how you can create this for yourself in the future. 38 03:07.500 --> 03:14.280 Now, if we scroll down, you can see there's five different colors, five different images, and there 39 03:14.280 --> 03:16.950 are some h2's and h1' s. 40 03:17.460 --> 03:24.540 In order to complete this project, I've created some steps for you in the TODOs which you can follow. 41 03:24.540 --> 03:29.610 Alternatively, you can simply look at the goal image and try to figure that out yourself. 42 03:29.640 --> 03:36.000 You can either use a stepwise approach in the TODOs or you can use the goal and do everything yourself. 43 03:36.000 --> 03:37.890 It totally is up to you. 44 03:38.640 --> 03:45.870 But what you're aiming for in the final version of the website, which you can view by right-clicking 45 03:45.870 --> 03:49.290 on solution.html, opening it up in the preview. 46 03:49.290 --> 03:55.590 And the most important things I want to point out is that the images are squares, 47 03:55.620 --> 04:02.120 t hey are 200 pixels by 200 pixels, so 200px high, 200px wide. 48 04:02.120 --> 04:09.590 Secondly, the font-weight of these h2's are different from normal h2's. 49 04:09.620 --> 04:11.510 They're actually a lot lighter. 50 04:11.510 --> 04:18.140 So we've set the font-weight to be normal rather than the default, which is h2's get bolded. 51 04:18.320 --> 04:23.450 The next thing is that the color of the text should match the meaning. 52 04:23.450 --> 04:27.320 So rojo means red, azul means blue, 53 04:27.320 --> 04:32.300 and because in our index.html I've matched each of them up together, 54 04:32.300 --> 04:39.020 but also you can look at the IDs if you don't know Spanish words because we're learning them after all, 55 04:39.020 --> 04:45.040 right? So yellow is amarillo, green is verde, and so on and so forth. 56 04:45.050 --> 04:53.510 So I want you to make sure that these h2's have a text color that matches whatever it is supposed 57 04:53.510 --> 04:53.900 to be. 58 04:53.900 --> 04:56.780 So blue or orange or green or whichever. 59 04:56.780 --> 04:59.420 So if you get confused, look at the goal.png. 60 04:59.960 --> 05:03.380 If you want to go step by step, then look at the TODOs at the bottom. 61 05:03.380 --> 05:09.050 But importantly, don't write anything or change anything in the index.html. 62 05:09.080 --> 05:11.600 All your work goes into the CSS file. 63 05:11.900 --> 05:14.600 Pause the video and give this a go now. 64 05:19.890 --> 05:20.250 All right. 65 05:20.250 --> 05:22.230 So let's run through the solution together. 66 05:22.230 --> 05:27.450 So the first thing we're going to do is we're going to make sure that the solution folder is collapsed, 67 05:27.450 --> 05:29.160 so it's not confusing, 68 05:29.160 --> 05:37.200 and then we're going to select this folder and then add a new file which I'll call style.css. 69 05:37.230 --> 05:41.310 Remember, the file name has to match what it's referred to here 70 05:41.310 --> 05:42.330 exactly. 71 05:42.330 --> 05:48.630 Sometimes you'll see people have styles.css, sometimes you'll see main.css, but as long as the 72 05:48.630 --> 05:50.520 file name matches, it doesn't really matter. 73 05:50.520 --> 05:52.770 It's up to you how you want to name it. 74 05:53.130 --> 06:00.360 Once I've created that, let's just make sure that my CSS file is properly linked up by doing that background-color 75 06:00.360 --> 06:01.950 change. 76 06:01.950 --> 06:06.090 So let's change it to red and then let's go ahead and preview this 77 06:06.090 --> 06:10.290 and if the background is red, then it means that it works. 78 06:10.290 --> 06:14.550 So I can now delete this and get rid of that horrible background. 79 06:15.120 --> 06:23.230 The next step is to go ahead and use CSS to style each of the color titles so that the color matches 80 06:23.230 --> 06:24.070 the meaning. 81 06:24.460 --> 06:34.360 The first one that we want to select is this h2, which displays Rojo and it has the ID of red. 82 06:34.360 --> 06:37.930 So remember, IDs are unique, so we can simply select that. 83 06:37.930 --> 06:45.190 So let's select the element with an ID of red and set its color to red. 84 06:45.580 --> 06:49.390 And so we can do the same thing for the rest of the colors. 85 06:49.390 --> 06:52.390 So now they're all matching with their meaning. 86 06:52.660 --> 06:59.620 The next step is to use CSS to change all the color titles, to have a different font-weight. 87 06:59.620 --> 07:02.710 And this is what we want the font-weight of normal. 88 07:02.710 --> 07:10.180 If we want to select all the h2s, then we're going to have a problem because this one is also an h2 89 07:10.180 --> 07:13.690 and we don't want that one to have a normal font-weight. 90 07:13.690 --> 07:15.640 We still want that to be bold. 91 07:15.640 --> 07:18.970 We want these to have the lower font-weight. 92 07:19.000 --> 07:22.060 So what is unique to all of these? 93 07:22.060 --> 07:29.200 Well, we've applied a class of "color-title" to each of them, which this h2 does not have. 94 07:29.230 --> 07:36.880 Then that means that we can simply select "color-title" and then apply the font-weight to all of 95 07:36.880 --> 07:38.680 those with that same class. 96 07:38.680 --> 07:43.540 And you can see that differentiates between this h2 and this h2. 97 07:43.540 --> 07:49.780 And instead all of these which are grouped together have that style applied. 98 07:50.020 --> 07:53.410 Now the final thing we need to do is to use CSS, 99 07:53.440 --> 08:00.070 note, not HTML to make all the images 200px high and 200px wide. 100 08:00.790 --> 08:02.200 How can we do that? 101 08:02.200 --> 08:06.670 Well, we can simply select the image element. 102 08:06.670 --> 08:17.230 So this is using an element selector and we can set the height to 200px and the width to 200px. 103 08:17.410 --> 08:19.180 And there you have it. 104 08:19.180 --> 08:26.140 All of our images are now squares matching the height and width that we've specified. 105 08:26.380 --> 08:30.820 You can of course change this and personalize it as much as you like, 106 08:30.820 --> 08:36.820 change up the colors or change up the words, learn the colors in a different language, make things 107 08:36.820 --> 08:39.790 even more beautiful using the styling that you've learned. 108 08:39.820 --> 08:46.180 But in the next section, we're going to be covering more about different CSS rules and you'll have 109 08:46.180 --> 08:50.320 more tools at your disposal in order to style your websites. 110 08:50.470 --> 08:56.680 So I hope you had fun in this section where we introduced you to CSS. Once you're ready, 111 08:56.710 --> 09:03.760 maybe tomorrow, maybe the next day, head over to the next section and continue learning about intermediate 112 09:03.760 --> 09:05.740 aspects of CSS. 113 09:05.770 --> 09:08.440 For all of that and more, I'll see you there.