1
00:00:00,330 --> 00:00:01,500
Instructor: So now that we've gotten

2
00:00:01,500 --> 00:00:04,830
a introduction to HTML

3
00:00:04,830 --> 00:00:07,470
I want you to put everything you've learned together

4
00:00:07,470 --> 00:00:10,920
in order to create a new project.

5
00:00:10,920 --> 00:00:13,320
So the project that we're gonna be building today

6
00:00:13,320 --> 00:00:15,750
is called the Favourite Movie Project.

7
00:00:15,750 --> 00:00:18,930
It's gonna be a website to keep track

8
00:00:18,930 --> 00:00:22,620
of all of your favorite movies that you've watched.

9
00:00:22,620 --> 00:00:24,870
When you go to rogerebert.com,

10
00:00:24,870 --> 00:00:29,610
he is one of the greatest film critics of all time in fact.

11
00:00:29,610 --> 00:00:30,750
He's passed away now,

12
00:00:30,750 --> 00:00:32,520
but he's got movie reviews

13
00:00:32,520 --> 00:00:35,400
and ratings for all the movies that he's watched.

14
00:00:35,400 --> 00:00:38,340
And you can see that when you go to his website.

15
00:00:38,340 --> 00:00:40,200
I think this is a really great way

16
00:00:40,200 --> 00:00:42,030
of keeping track of what you've watched

17
00:00:42,030 --> 00:00:44,850
because when friends ask me for recommendations

18
00:00:44,850 --> 00:00:46,320
I can never remember

19
00:00:46,320 --> 00:00:48,120
what it is that I've watched in this year

20
00:00:48,120 --> 00:00:51,330
that I really like and what to recommend.

21
00:00:51,330 --> 00:00:52,860
So what we're gonna be building today

22
00:00:52,860 --> 00:00:55,080
is a very simple website.

23
00:00:55,080 --> 00:00:57,810
It's going to be a website

24
00:00:57,810 --> 00:01:00,210
that tracks your favorite movies,

25
00:01:00,210 --> 00:01:02,550
maybe of all time, maybe of the last year,

26
00:01:02,550 --> 00:01:04,110
whatever you wanna do.

27
00:01:04,110 --> 00:01:06,660
And the requirement is you should have at least

28
00:01:06,660 --> 00:01:09,360
three movies that you put in here.

29
00:01:09,360 --> 00:01:13,110
So what you're gonna need is to create a h1

30
00:01:13,110 --> 00:01:16,920
as the title of the website

31
00:01:16,920 --> 00:01:21,870
and then you're gonna have an h2 as the subtitle

32
00:01:21,870 --> 00:01:25,380
and then you're gonna have a horizontal rule

33
00:01:25,380 --> 00:01:27,780
as your void element in there.

34
00:01:27,780 --> 00:01:30,060
And then you're gonna have three movies

35
00:01:30,060 --> 00:01:31,320
that you're gonna list

36
00:01:31,320 --> 00:01:36,320
and they're all gonna be created using the h3 element.

37
00:01:36,480 --> 00:01:38,850
And then finally, you should have a section,

38
00:01:38,850 --> 00:01:43,290
which is going to be a paragraph element

39
00:01:43,290 --> 00:01:47,370
that's going to describe why you liked those movies.

40
00:01:47,370 --> 00:01:51,870
And this is basically a very simple format for this website.

41
00:01:51,870 --> 00:01:54,570
Now, feel free once you've done all of this

42
00:01:54,570 --> 00:01:58,290
to continue to mod this website, to change it up,

43
00:01:58,290 --> 00:02:00,120
to add things, to add break elements,

44
00:02:00,120 --> 00:02:01,770
whatever it is you wanna do.

45
00:02:01,770 --> 00:02:03,180
But at the minimum,

46
00:02:03,180 --> 00:02:07,230
I want to see all of these elements represented on a page.

47
00:02:07,230 --> 00:02:10,350
And of course, feel free to add your own movies.

48
00:02:10,350 --> 00:02:13,260
And I would love to see in the Q and A a picture

49
00:02:13,260 --> 00:02:17,670
of your website to see what it is that are your top movies.

50
00:02:17,670 --> 00:02:19,410
And maybe I'll get some inspiration

51
00:02:19,410 --> 00:02:21,180
till the next time when I have movie night

52
00:02:21,180 --> 00:02:23,370
and I can't figure out what to watch.

53
00:02:23,370 --> 00:02:26,940
So I'm curious to see your recommendations as well.

54
00:02:26,940 --> 00:02:31,530
So go ahead and download the movie ranking project zip file

55
00:02:31,530 --> 00:02:35,010
from this lesson's course resources.

56
00:02:35,010 --> 00:02:36,540
If you don't know how to do that, again

57
00:02:36,540 --> 00:02:39,600
go back to one of the first videos in the course

58
00:02:39,600 --> 00:02:41,490
at the very beginning of section one,

59
00:02:41,490 --> 00:02:43,620
where I showed you in a video

60
00:02:43,620 --> 00:02:46,410
how to download course resources.

61
00:02:46,410 --> 00:02:49,650
And once you've unzipped it and extracted it

62
00:02:49,650 --> 00:02:51,480
then open it up in VS code

63
00:02:51,480 --> 00:02:53,040
and go ahead and code

64
00:02:53,040 --> 00:02:56,550
to your heart's content using everything you've learned.

65
00:02:56,550 --> 00:02:58,593
Pause the video now and give that a go.

66
00:03:02,730 --> 00:03:05,460
Now let's go through the solution.

67
00:03:05,460 --> 00:03:07,920
In my case, I'm going to have an h1 at the top,

68
00:03:07,920 --> 00:03:10,233
which is going to be the title.

69
00:03:12,000 --> 00:03:17,000
Top movies of all time according to Angela.

70
00:03:19,532 --> 00:03:20,670
And then afterwards,

71
00:03:20,670 --> 00:03:23,340
I'm going to create a subtitle,

72
00:03:23,340 --> 00:03:28,037
which I will write my best three movies.

73
00:03:30,240 --> 00:03:31,140
And then after that

74
00:03:31,140 --> 00:03:34,890
we were going to add a horizontal rule to separate this part

75
00:03:34,890 --> 00:03:37,620
from the actual content of our website.

76
00:03:37,620 --> 00:03:39,630
And I'm gonna create an h3

77
00:03:39,630 --> 00:03:42,750
to represent each of the movies I'm gonna recommend.

78
00:03:42,750 --> 00:03:47,220
So I'm gonna recommend "Spirited Away",

79
00:03:47,220 --> 00:03:49,443
which is one of my favorite animes.

80
00:03:50,850 --> 00:03:52,920
And I'm gonna use a paragraph tag

81
00:03:52,920 --> 00:03:55,890
to describe a little bit about why I like it.

82
00:03:55,890 --> 00:03:58,743
So I'm just gonna call it favorite anime.

83
00:03:59,700 --> 00:04:04,700
And then the next movie will be "Ex Machina".

84
00:04:06,840 --> 00:04:08,100
And I really liked it

85
00:04:08,100 --> 00:04:11,823
because it's a really cool sci-fi movie.

86
00:04:13,357 --> 00:04:15,930
And then finally the third one

87
00:04:15,930 --> 00:04:20,930
is going to be the movie "Drive" with Ryan Gosling

88
00:04:22,200 --> 00:04:26,073
because it was really beautifully shot.

89
00:04:29,340 --> 00:04:30,173
Cool.

90
00:04:30,173 --> 00:04:34,890
This is the basics of what you would need

91
00:04:34,890 --> 00:04:37,620
to have done for this project.

92
00:04:37,620 --> 00:04:41,100
It has all of the elements that were required.

93
00:04:41,100 --> 00:04:44,910
And you can see in the goal PNG

94
00:04:44,910 --> 00:04:47,370
that it's got all the things that we've described.

95
00:04:47,370 --> 00:04:49,290
Even if the text is a little bit different,

96
00:04:49,290 --> 00:04:51,270
of course it won't be according to Angela for you.

97
00:04:51,270 --> 00:04:53,760
It'll be according to your name.

98
00:04:53,760 --> 00:04:56,040
And now that you've done that

99
00:04:56,040 --> 00:04:59,820
feel free to add different things in here as you would want.

100
00:04:59,820 --> 00:05:02,820
Maybe add a bit more to the paragraph tags,

101
00:05:02,820 --> 00:05:06,810
maybe add a poem about your favorite movie.

102
00:05:06,810 --> 00:05:07,740
Go crazy.

103
00:05:07,740 --> 00:05:10,380
Try out things and share

104
00:05:10,380 --> 00:05:14,850
in the Q and A your project as a screenshot.

105
00:05:14,850 --> 00:05:16,260
If you don't know how to do a screenshot

106
00:05:16,260 --> 00:05:19,147
be sure to be sure to type that into Google.

107
00:05:19,147 --> 00:05:20,760
"How do I create a screenshot?"

108
00:05:20,760 --> 00:05:22,740
And then you can add it into the Q and A.

109
00:05:22,740 --> 00:05:27,360
We can all look at your favorite movies and be inspired.

110
00:05:27,360 --> 00:05:31,140
So I hope you enjoyed building the project together,

111
00:05:31,140 --> 00:05:33,990
and in the next section

112
00:05:33,990 --> 00:05:36,660
we're going to dive a little bit deeper

113
00:05:36,660 --> 00:05:40,410
into some more intermediate aspects of HTML.

114
00:05:40,410 --> 00:05:42,510
So for all of that and more,

115
00:05:42,510 --> 00:05:43,887
I'll see you there.