1 00:00:00,330 --> 00:00:01,680 Instructor: All right, so now it's time 2 00:00:01,680 --> 00:00:04,590 for our final project of the section. 3 00:00:04,590 --> 00:00:07,230 And in this project, we're gonna be building a website 4 00:00:07,230 --> 00:00:09,780 to help you learn Spanish. 5 00:00:09,780 --> 00:00:11,370 Now, you might already know Spanish, 6 00:00:11,370 --> 00:00:13,260 but I'm currently learning Spanish 7 00:00:13,260 --> 00:00:15,960 and there's so much vocab to get through, 8 00:00:15,960 --> 00:00:20,960 I thought why don't we build a vocabulary flashcard website 9 00:00:21,120 --> 00:00:22,860 but a really, really simple one 10 00:00:22,860 --> 00:00:25,440 using everything we know so far. 11 00:00:25,440 --> 00:00:29,520 In this project, we're going to be creating a website 12 00:00:29,520 --> 00:00:34,470 where we list the words in, well, in this case, in Spanish, 13 00:00:34,470 --> 00:00:36,570 it could be any other language you choose 14 00:00:36,570 --> 00:00:37,920 and we're going to match it 15 00:00:37,920 --> 00:00:40,770 with an image of a particular color 16 00:00:40,770 --> 00:00:44,700 so that we learn all the colors in our foreign language. 17 00:00:44,700 --> 00:00:47,550 This is what the final website should look like. 18 00:00:47,550 --> 00:00:51,840 We've got our word, which is foreign, 19 00:00:51,840 --> 00:00:55,680 in the color that matches the image 20 00:00:55,680 --> 00:01:00,000 and we've got our images all lined up as nice little squares 21 00:01:00,000 --> 00:01:02,820 so that we can scroll through this website 22 00:01:02,820 --> 00:01:05,489 and learn the words for the colors in Spanish. 23 00:01:05,489 --> 00:01:07,470 Once you're ready, go ahead and download 24 00:01:07,470 --> 00:01:10,080 the Color Vocab Project starting files, 25 00:01:10,080 --> 00:01:14,460 extract it and open it up inside VS Code. 26 00:01:14,460 --> 00:01:17,370 In the index.html, you'll see 27 00:01:17,370 --> 00:01:20,490 that I've already set you up with some starting code. 28 00:01:20,490 --> 00:01:23,550 If you go ahead and show it as a preview, 29 00:01:23,550 --> 00:01:27,540 you'll see some words for the colors in Spanish 30 00:01:27,540 --> 00:01:31,680 and the different images for the different colors. 31 00:01:31,680 --> 00:01:32,760 Now, don't worry about the fact 32 00:01:32,760 --> 00:01:34,650 that images are all different sizes. 33 00:01:34,650 --> 00:01:38,760 We're gonna fix that with CSS very soon in the project. 34 00:01:38,760 --> 00:01:42,840 First thing to note is we've already set you up with a link 35 00:01:42,840 --> 00:01:47,840 to an external style sheet, which is inside style.css, 36 00:01:48,330 --> 00:01:51,180 but notice that we haven't created that file for you. 37 00:01:51,180 --> 00:01:54,510 So I want you to create a new file 38 00:01:54,510 --> 00:01:59,430 inside the correct location by using this button in VS Code 39 00:01:59,430 --> 00:02:02,670 and then name it once you've created it 40 00:02:02,670 --> 00:02:04,770 so that it actually works. 41 00:02:04,770 --> 00:02:06,870 And one of the things that I often check 42 00:02:06,870 --> 00:02:10,169 to make sure that my external CSS is linked up 43 00:02:10,169 --> 00:02:13,350 is to target everything on the page 44 00:02:13,350 --> 00:02:18,060 and to set the background color to red. 45 00:02:18,060 --> 00:02:21,180 That way you know that if it actually does work, 46 00:02:21,180 --> 00:02:23,250 then it's linked up correctly 47 00:02:23,250 --> 00:02:26,700 and it's really obvious when it doesn't, like right now. 48 00:02:26,700 --> 00:02:29,820 And the reason here is because my style.css 49 00:02:29,820 --> 00:02:32,010 is actually outside this folder. 50 00:02:32,010 --> 00:02:35,190 It's just floating about somewhere, and I have to get it 51 00:02:35,190 --> 00:02:39,060 so that it's at the location that I specified 52 00:02:39,060 --> 00:02:41,820 in the external style sheet link. 53 00:02:41,820 --> 00:02:44,280 So I don't want you to change anything 54 00:02:44,280 --> 00:02:47,460 inside the index.html. 55 00:02:47,460 --> 00:02:50,220 Instead, all of your work is gonna happen 56 00:02:50,220 --> 00:02:53,410 inside the CSS file which you'll create 57 00:02:54,390 --> 00:02:57,720 and you will incorporate into your project 58 00:02:57,720 --> 00:03:00,060 using this file path 59 00:03:00,060 --> 00:03:03,420 to make sure that you understand how file paths work 60 00:03:03,420 --> 00:03:06,170 and how you can create this for yourself in the future. 61 00:03:07,710 --> 00:03:09,180 Now, if we scroll down, 62 00:03:09,180 --> 00:03:11,460 you can see there's five different colors, 63 00:03:11,460 --> 00:03:16,387 five different images, and there are some h2s and h1s. 64 00:03:17,550 --> 00:03:19,320 In order to complete this project, 65 00:03:19,320 --> 00:03:22,440 I've created some steps for you in the to-do's, 66 00:03:22,440 --> 00:03:24,630 which you can follow. 67 00:03:24,630 --> 00:03:27,630 Alternatively, you can simply look at the goal image 68 00:03:27,630 --> 00:03:29,760 and try to figure it out yourself. 69 00:03:29,760 --> 00:03:32,970 You can either use a stepwise approach in the to-do's 70 00:03:32,970 --> 00:03:36,060 or you can use the goal and do everything yourself. 71 00:03:36,060 --> 00:03:37,773 It totally is up to you. 72 00:03:38,850 --> 00:03:40,620 But what you're aiming for 73 00:03:40,620 --> 00:03:43,350 in the final version of the website, 74 00:03:43,350 --> 00:03:47,130 wich you can view by right clicking on solution.html, 75 00:03:47,130 --> 00:03:49,560 opening it up in the preview. 76 00:03:49,560 --> 00:03:52,860 And the most important things I want to point out 77 00:03:52,860 --> 00:03:55,650 is that the images are squares. 78 00:03:55,650 --> 00:03:58,290 They are 200 pixel by 200 pixels, 79 00:03:58,290 --> 00:04:01,413 so 200 pixel high, 200 pixel wide. 80 00:04:02,430 --> 00:04:07,320 Secondly, the font weight of these h2s 81 00:04:07,320 --> 00:04:09,840 are different from normal h2s. 82 00:04:09,840 --> 00:04:11,580 They're actually a lot lighter, 83 00:04:11,580 --> 00:04:14,250 so we've set the font weight to be normal 84 00:04:14,250 --> 00:04:18,630 rather than the default, which is h2s get bolded. 85 00:04:18,630 --> 00:04:21,959 The next thing is that the color of the text 86 00:04:21,959 --> 00:04:23,490 should match the meaning. 87 00:04:23,490 --> 00:04:27,600 So rojo means red, azul means blue. 88 00:04:27,600 --> 00:04:30,030 And because in our index.html, 89 00:04:30,030 --> 00:04:32,550 I've matched each of them up together. 90 00:04:32,550 --> 00:04:34,830 But also you can look at the IDs 91 00:04:34,830 --> 00:04:36,990 if you don't know Spanish words 92 00:04:36,990 --> 00:04:39,480 because we're learning them after all, right? 93 00:04:39,480 --> 00:04:43,650 So yellow is amarillo, green is verde 94 00:04:43,650 --> 00:04:45,270 and so on and so forth. 95 00:04:45,270 --> 00:04:50,270 So I want you to make sure that these h2s have a text color 96 00:04:50,520 --> 00:04:53,970 that matches whatever it is supposed to be, 97 00:04:53,970 --> 00:04:57,060 so blue or orange or green or whichever. 98 00:04:57,060 --> 00:04:59,940 So if you get confused, look at the goal.png. 99 00:04:59,940 --> 00:05:01,440 If you wanna go step by step, 100 00:05:01,440 --> 00:05:03,690 then look at the to-do's at the bottom. 101 00:05:03,690 --> 00:05:07,560 But importantly, don't write anything or change anything 102 00:05:07,560 --> 00:05:09,330 in the index.html. 103 00:05:09,330 --> 00:05:12,000 All your work goes into the CSS file. 104 00:05:12,000 --> 00:05:14,643 Pause the video and give this a go now. 105 00:05:20,010 --> 00:05:22,290 All right, so let's run through the solution together. 106 00:05:22,290 --> 00:05:23,730 So the first thing we're gonna do 107 00:05:23,730 --> 00:05:25,830 is we're going to make sure 108 00:05:25,830 --> 00:05:29,400 that the solution folders collapse so it's not confusing. 109 00:05:29,400 --> 00:05:32,100 And then we're going to select this folder 110 00:05:32,100 --> 00:05:37,100 and then add a new file, which I'll call style.css. 111 00:05:37,440 --> 00:05:39,840 Remember, the file name has to match 112 00:05:39,840 --> 00:05:42,510 what it's referred to here exactly. 113 00:05:42,510 --> 00:05:45,420 Sometimes you'll see people have styles.css, 114 00:05:45,420 --> 00:05:47,970 sometimes you'll see main.css, 115 00:05:47,970 --> 00:05:49,530 but as long as the file name matches, 116 00:05:49,530 --> 00:05:50,580 it doesn't really matter. 117 00:05:50,580 --> 00:05:53,340 It's up to you how you want to name it. 118 00:05:53,340 --> 00:05:55,740 Once I've created that, let's just make sure 119 00:05:55,740 --> 00:05:58,500 that my CSS file is properly linked up 120 00:05:58,500 --> 00:06:02,190 by doing that background color change. 121 00:06:02,190 --> 00:06:03,720 So let's change it to red 122 00:06:03,720 --> 00:06:06,330 and then let's go ahead and preview this. 123 00:06:06,330 --> 00:06:10,530 And if the background is red, then it means that it works. 124 00:06:10,530 --> 00:06:12,180 So I can now delete this 125 00:06:12,180 --> 00:06:14,463 and get rid of that horrible background. 126 00:06:15,360 --> 00:06:19,410 The next step is to go ahead and use CSS 127 00:06:19,410 --> 00:06:21,630 to style each of the color titles 128 00:06:21,630 --> 00:06:24,510 so that the color matches the meaning. 129 00:06:24,510 --> 00:06:29,010 The first one that we wanna select is this h2, 130 00:06:29,010 --> 00:06:34,010 which displays rojo, and it has the ID of red. 131 00:06:34,440 --> 00:06:38,010 So remember, IDs are unique so we can simply select that. 132 00:06:38,010 --> 00:06:42,210 So let's select the element with an ID of red 133 00:06:42,210 --> 00:06:45,840 and set its color to red. 134 00:06:45,840 --> 00:06:49,440 And so we can do the same thing for the rest of the colors, 135 00:06:49,440 --> 00:06:52,920 so now they're all matching with their meaning. 136 00:06:52,920 --> 00:06:57,840 The next step is to use CSS to change all the color titles 137 00:06:57,840 --> 00:06:59,700 to have a different font weight. 138 00:06:59,700 --> 00:07:02,880 And this is what we want, the font weight of normal. 139 00:07:02,880 --> 00:07:06,360 If we wanna select all the h2s, 140 00:07:06,360 --> 00:07:07,560 then we're gonna have a problem 141 00:07:07,560 --> 00:07:10,230 because this one is also an h2 142 00:07:10,230 --> 00:07:13,650 and we don't want that one to have a normal font weight. 143 00:07:13,650 --> 00:07:15,690 We still want that to be bold. 144 00:07:15,690 --> 00:07:19,230 We want these to have the lower font weight. 145 00:07:19,230 --> 00:07:22,080 So what is unique to all of these? 146 00:07:22,080 --> 00:07:26,850 Well, we've applied a class of color title to each of them 147 00:07:26,850 --> 00:07:29,340 which this h2 does not have. 148 00:07:29,340 --> 00:07:34,200 Then, that means that we can simply select color-title 149 00:07:34,200 --> 00:07:35,970 and then apply the font weight 150 00:07:35,970 --> 00:07:38,820 to all of those with that same class. 151 00:07:38,820 --> 00:07:40,680 And you can see that differentiates 152 00:07:40,680 --> 00:07:43,770 between this h2 and this h2. 153 00:07:43,770 --> 00:07:47,430 And instead, all of these, which are grouped together, 154 00:07:47,430 --> 00:07:50,280 have that style applied. 155 00:07:50,280 --> 00:07:53,430 Now, the final thing we need to do is to use CSS, 156 00:07:53,430 --> 00:07:56,640 note not HTML, to make all the images 157 00:07:56,640 --> 00:07:59,943 200 pixels high and 200 pixels wide. 158 00:08:00,870 --> 00:08:02,190 How can we do that? 159 00:08:02,190 --> 00:08:06,750 Well, we can simply select the image element. 160 00:08:06,750 --> 00:08:09,750 So this is using an element selector 161 00:08:09,750 --> 00:08:13,800 and we can set the height to 200 pixels 162 00:08:13,800 --> 00:08:17,760 and the width to 200 pixels. 163 00:08:17,760 --> 00:08:19,200 And there you have it. 164 00:08:19,200 --> 00:08:22,260 All of our images are now squares 165 00:08:22,260 --> 00:08:26,520 matching the height and width that we've specified. 166 00:08:26,520 --> 00:08:28,500 You can, of course, change this 167 00:08:28,500 --> 00:08:31,980 and personalize it as much as you like, change up the colors 168 00:08:31,980 --> 00:08:33,539 or change up the words, 169 00:08:33,539 --> 00:08:35,940 learn the colors in a different language, 170 00:08:35,940 --> 00:08:37,890 make things even more beautiful 171 00:08:37,890 --> 00:08:40,080 using the styling that you've learned. 172 00:08:40,080 --> 00:08:43,289 But in the next section, we're gonna be covering more 173 00:08:43,289 --> 00:08:47,100 about different CSS rules, and you'll have more tools 174 00:08:47,100 --> 00:08:50,670 at your disposal in order to style your websites. 175 00:08:50,670 --> 00:08:53,160 So I hope you have fun in this section 176 00:08:53,160 --> 00:08:55,620 where we introduce you to CSS. 177 00:08:55,620 --> 00:08:59,400 Once you're ready, maybe tomorrow, maybe the next day, 178 00:08:59,400 --> 00:09:01,110 head over to the next section 179 00:09:01,110 --> 00:09:05,970 and continue learning about intermediate aspects of CSS. 180 00:09:05,970 --> 00:09:08,967 For all of that and more, I'll see you there.