WEBVTT 0 00:00.290 --> 00:00.680 All right. 1 00:00.680 --> 00:07.070 So for the final project, we're going to be building a motivational poster website and we're going 2 00:07.070 --> 00:09.000 to make our own memes. 3 00:09.020 --> 00:11.880 You might have seen some of these around the Internet. 4 00:11.900 --> 00:17.780 There are the serious ones which are based off these '90s seconds motivational posters where you have 5 00:17.780 --> 00:23.280 some sort of title and you have some sort of motivational text like, "POTENTIAL." 6 00:23.300 --> 00:27.620 "We all have the tools for greatness within us," and I believe that is true, 7 00:27.620 --> 00:29.650 and you've got a cute little Arctic fox. 8 00:29.660 --> 00:33.510 But also there are some pretty hilarious ones like "COOLNESS." 9 00:33.530 --> 00:36.410 "You may be cool...but you'll never be 4 popped-collars 10 00:36.410 --> 00:37.850 cool," like this guy. 11 00:37.970 --> 00:43.850 So the goal is to make our own website where we can create our own motivational poster. 12 00:44.030 --> 00:50.090 The important part of a motivational poster is there is an image that is going to be big, 13 00:50.090 --> 00:53.870 there is a border around the image, 14 00:53.870 --> 00:56.970 so we now know all about borders and we can do that. 15 00:56.990 --> 01:04.690 We have a black background and that is easy because we know all about CSS color properties. 16 01:04.710 --> 01:13.560 We have a big main title, which we're going to use a custom font to mimic this font a little bit 17 01:13.560 --> 01:14.250 better. 18 01:14.250 --> 01:20.910 And finally, we have a paragraph at the bottom. And we're going to figure out how we're going to center 19 01:20.910 --> 01:26.850 things on the screen, how to add borders and how to apply basically everything that we've learned so 20 01:26.850 --> 01:28.260 far in this section. 21 01:28.620 --> 01:35.520 Go ahead and download the starting project files for the Motivation Meme Project and extract it and 22 01:35.520 --> 01:38.100 then open it up inside VS Code. 23 01:38.310 --> 01:44.190 I've created the task in a sort of TODO list breakdown for you. 24 01:44.220 --> 01:49.740 Now the main thing is that it's your website, it's your project, and as with all the projects in the 25 01:49.740 --> 01:52.920 course, it's totally up to you how you want to create it. 26 01:52.920 --> 01:59.100 But, there are some caveats and it's important that you touch all of the learning points. 27 01:59.100 --> 02:06.690 So these six points are important, and after completing these six points, you can change your website, 28 02:06.690 --> 02:12.120 you can mess with it however you like, but want to make sure that everything you've learned so far 29 02:12.120 --> 02:15.150 has consolidated and it all makes sense. 30 02:15.570 --> 02:23.040 We're going to use a custom font from Google called The Libre-Baskerville, which looks somewhat similar 31 02:23.040 --> 02:26.550 to the motivational main title font. 32 02:26.910 --> 02:32.850 You should add your own image into the images folder under the assets folder. 33 02:32.850 --> 02:38.760 I've got an example image in here for you just in case you want to use it, but I recommend putting 34 02:38.760 --> 02:41.190 in your own images just for practice. 35 02:41.280 --> 02:50.280 And that image should have a 5px white border and the text should be center-aligned and you should 36 02:50.280 --> 02:54.060 adjust the margin so that the image and text are centered on the page. 37 02:54.060 --> 03:01.050 Now, this is going to be the trickiest part because centering elements using CSS is a whole science 38 03:01.050 --> 03:03.450 in itself, but we're going to do it simply. 39 03:03.480 --> 03:09.990 We're going to horizontally center the div by giving that div a width of 50% to take up 50% of the screen, 40 03:09.990 --> 03:13.620 and then if you think about it, there's only 25% left on each side. 41 03:13.620 --> 03:19.770 So if we have a margin-left of 20% on that div, then it should push it into the center. 42 03:20.040 --> 03:25.680 In addition, you might find it useful to set the image to have a width of 100% so that it fills the 43 03:25.680 --> 03:30.660 entire container div so that you're not having to center the image along with the div. 44 03:30.690 --> 03:35.670 Some of these hints are only going to make sense once you get started writing the code for it, so don't 45 03:35.670 --> 03:36.540 worry too much about it 46 03:36.540 --> 03:42.030 now, I'm just highlighting certain points in the TODO so that when you get to it, to pay more attention 47 03:42.030 --> 03:47.100 to these parts and these helpful tips, which you'll probably need because especially at this point, 48 03:47.130 --> 03:52.860 number five, it's quite a difficult task and it will take some time for you to figure out how to get 49 03:52.860 --> 03:54.630 it to look like this. 50 03:55.380 --> 04:02.850 And if you want to push the div down vertically, then I recommend just adding a top-margin to push 51 04:02.850 --> 04:04.770 it down by a pixel amount. 52 04:04.800 --> 04:10.590 It doesn't have to be spot bang in the middle of the center because as I said, that is a whole science 53 04:10.590 --> 04:15.750 in itself and we're going to be covering it in coming sections, but it's just a little bit more complicated. 54 04:15.750 --> 04:21.270 So we're going to judge it by eye for this project for now. In order to get something that looks like 55 04:21.270 --> 04:29.340 the goal image, I recommend putting the h1, the paragraph, and the image inside a div. 56 04:29.370 --> 04:36.300 That way you can center the div on the screen and you won't have to mess with all three elements and 57 04:36.300 --> 04:39.330 their centering, which is already a hard enough task. 58 04:40.230 --> 04:49.710 Finally, you're going to use your Developer D oc reading skills and learn by yourself about a property 59 04:49.710 --> 04:58.140 called text-transform and figure out how to make the h1 look uppercase like what I've got in the solution 60 04:58.140 --> 04:59.640 goal website. 61 05:00.130 --> 05:01.900 All of these elements are on screen. 62 05:01.900 --> 05:07.660 We've got the white board around the image, we've got the black background, the white text, the custom 63 05:07.660 --> 05:15.520 font and our h1 is totally in uppercase without us having to type it in uppercase. 64 05:15.520 --> 05:18.730 So that's where that text-transform property comes in. 65 05:18.730 --> 05:25.510 And notice how this entire content div is roughly somewhere in the center, horizontally and vertically, 66 05:25.510 --> 05:26.800 just judging it by eye. 67 05:26.830 --> 05:33.100 It's not perfect, but as long as you find the perfect avocado, everything else is easy in life. 68 05:33.520 --> 05:40.420 Pause the video now and complete this project and once you're done, come back and I'm going to walk 69 05:40.420 --> 05:41.980 through the solution code with you. 70 05:44.810 --> 05:45.140 All right. 71 05:45.140 --> 05:47.290 So hopefully that wasn't too hard. 72 05:47.300 --> 05:56.570 If we take a look at the solution HTML, you can see that I've completed all of those tasks with a small 73 05:56.690 --> 06:01.010 HTML and a small CSS file, so it shouldn't be too hard. 74 06:01.160 --> 06:06.650 Now, some of the steps are pretty self-explanatory, but there's a couple of things I want to just 75 06:06.650 --> 06:07.750 briefly touch on. 76 06:07.760 --> 06:17.930 One is you will need the Google font links in the head section if you want to be able to have that custom 77 06:17.930 --> 06:19.520 font on screen. 78 06:19.520 --> 06:21.530 And this is the custom font. 79 06:22.040 --> 06:29.600 In addition, we want to have all our elements inside a div so that we can style it all together, 80 06:29.600 --> 06:32.090 and that's quite important in terms of positioning. 81 06:32.090 --> 06:34.550 So I've created a class for the div. 82 06:35.180 --> 06:41.450 In this case, you could have also used an ID, but if you were going to extend this website then it's 83 06:41.450 --> 06:42.920 safer to use a class 84 06:42.920 --> 06:46.380 so that you might be able to reuse the CSS in the future. 85 06:46.740 --> 06:54.570 The poster is the part that is more or less center aligned and we used that trick with setting its width 86 06:54.570 --> 06:59.670 and setting its margin, using percentages to get it more or less in the horizontal center. 87 06:59.670 --> 07:05.580 And then I simply set a 100px margin-top, just judging it by eye to get it somewhere in the middle. 88 07:06.030 --> 07:16.200 And I added the custom font and the border to the image and made the image 100% wide so that it would 89 07:16.200 --> 07:21.840 fit fully into that poster div. If you had any problems 90 07:21.840 --> 07:26.910 this is a time where you can look at the solution code and look at your own code and see if there's 91 07:26.910 --> 07:28.860 any fixes you want to make. 92 07:28.890 --> 07:35.850 And once you have, then you can also modify the website any way you like to personalize it and make 93 07:35.850 --> 07:36.720 it your own.