WEBVTT 0 00:00.200 --> 00:07.310 So now that we've gotten an introduction to HTML, I want you to put everything you've learned together 1 00:07.310 --> 00:10.630 in order to create a new project. 2 00:10.640 --> 00:15.530 So the project that we're going to be building today is called The Favorite Movie Project. 3 00:15.530 --> 00:22.910 It's going to be a website to keep track of all of your favorite movies that you've watched. When you 4 00:22.910 --> 00:28.580 go to rogerebert.com, he is one of the greatest film critics of all time 5 00:28.580 --> 00:34.460 in fact. He's passed away now, but he's got movie reviews and ratings for all the movies that he's 6 00:34.460 --> 00:35.120 watched. 7 00:35.120 --> 00:37.850 And you can see that when you go to his website. 8 00:38.150 --> 00:41.960 I think this is a really great way of keeping track of what you've watched, 9 00:41.960 --> 00:47.450 because when friends ask me for recommendations, I can never remember what it is that I've watched 10 00:47.450 --> 00:50.970 in this year that I really like and what to recommend. 11 00:50.990 --> 00:54.890 So what we're going to be building today is a very simple website. 12 00:54.890 --> 01:02.580 It's going to be a website that tracks your favorite movies maybe of all time, maybe of the last year, 13 01:02.580 --> 01:03.810 whatever you want to do. 14 01:03.810 --> 01:08.940 And the requirement is you should have at least three movies that you put in here. 15 01:09.150 --> 01:17.640 So what you're going to need is to create a h1 as the title of the website, and then you're going to 16 01:17.640 --> 01:26.910 have an h2 as the subtitle, and then you're going to have a horizontal rule as your void element in 17 01:26.940 --> 01:27.530 there. 18 01:27.540 --> 01:33.360 And then you're going to have three movies that you're going to list, and they're all going to be created 19 01:33.360 --> 01:36.240 using the h3 element. 20 01:36.240 --> 01:44.010 And then finally you should have a section which is going to be a paragraph element that's going to 21 01:44.010 --> 01:47.190 describe why you liked those movies. 22 01:47.190 --> 01:51.690 And this is basically a very simple format for this website. 23 01:51.720 --> 01:58.710 Now feel free once you've done all of this to continue to mould this website, to change it up, to add 24 01:58.710 --> 02:01.620 things, to add break elements, whatever it is you want to do, 25 02:01.620 --> 02:06.930 but at the minimum, I want to see all of these elements represented on a page. 26 02:06.930 --> 02:10.350 And of course, feel free to add your own movies 27 02:10.350 --> 02:17.070 and I would love to see in the Q&A, a picture of your website to see what it is that are your top 28 02:17.070 --> 02:17.640 movies 29 02:17.640 --> 02:19.440 and maybe I'll get some inspiration 30 02:19.440 --> 02:23.010 to the next time when I have movie night and I can't figure out what to watch. 31 02:23.160 --> 02:26.550 So I'm curious to see your recommendations as well. 32 02:26.730 --> 02:34.950 So go ahead and download the Movie Ranking Project zipped file from this lesson's course resources. 33 02:34.950 --> 02:40.170 If you don't know how to do that again, go back to one of the first videos in the course at the very 34 02:40.170 --> 02:46.170 beginning of Section 1 where I showed you in a video, "How to Download Course Resources." 35 02:46.290 --> 02:53.490 And once you've unzipped it and extracted it, then open it up in VS Code and go ahead and code to your 36 02:53.490 --> 02:56.040 heart's content using everything you've learned. 37 02:56.220 --> 02:58.680 Pause the video now and give that a go. 38 03:02.510 --> 03:05.270 Now let's go through the solution. 39 03:05.270 --> 03:10.040 In my case, I'm going to have an h1 at the top, which is going to be the title. 40 03:10.040 --> 03:18.440 So, "Top Movies of All Time According to Angela." 41 03:19.190 --> 03:28.580 And then afterwards, I'm going to create a subtitle which I will write, "My Best 3 movies." 42 03:29.870 --> 03:36.110 And then after that we were going to add a horizontal rule to separate this part from the actual content 43 03:36.110 --> 03:37.220 of our website. 44 03:37.220 --> 03:42.530 And I'm going to create an h3 to represent each of the movies I'm going to recommend. 45 03:42.530 --> 03:49.430 So I'm going to recommend Spirited Away, which is one of my favorite animes. 46 03:50.390 --> 03:55.790 And I'm going to use a paragraph tag to describe a little bit about why I like it. 47 03:55.790 --> 03:58.370 So I'm just going to call it favorite anime. 48 03:59.360 --> 04:05.520 And then the next movie We will be Ex Machina. 49 04:06.600 --> 04:11.940 And I really liked it because it's a really cool sci-fi movie. 50 04:13.120 --> 04:24.520 And then finally, the third one is going to be the movie, Drive with Ryan Gosling because it was really 51 04:24.520 --> 04:26.080 beautifully shot. 52 04:29.150 --> 04:29.910 Cool. 53 04:29.930 --> 04:37.520 This is the basics of what you would need to have done for this project. 54 04:37.520 --> 04:45.890 It has all of the elements that were required and you can see in the goal.png that it's got all the 55 04:45.890 --> 04:49.160 things that we've described, even if the text is a little bit different. 56 04:49.190 --> 04:53.510 Of course it won't be, according to Angela for you, it will be according to your name. 57 04:53.510 --> 04:59.600 And now that you've done that, feel free to add different things in here as you would want. 58 04:59.630 --> 05:07.640 Maybe add a bit more to the paragraph tags, maybe add a poem about your favorite movie, go crazy, 59 05:07.670 --> 05:14.300 try out things and share in the Q&A your project as a screenshot. 60 05:14.660 --> 05:19.070 If you don't know how to do a screenshot, be sure to type that into Google, 61 05:19.070 --> 05:20.660 how do I create a screenshot? 62 05:20.660 --> 05:27.110 And then you can add it into the Q&A and we can all look at your favorite movies and be inspired. 63 05:27.110 --> 05:30.930 So I hope you enjoyed building the project together. 64 05:30.930 --> 05:39.060 And in the next section we're going to dive a little bit deeper into some more intermediate aspects 65 05:39.060 --> 05:40.320 of HTML. 66 05:40.320 --> 05:43.350 So for all of that and more, I'll see you there.