1
00:00:00,360 --> 00:00:02,880
Instructor: All right, so for the final project,

2
00:00:02,880 --> 00:00:06,630
we're gonna be building a motivational poster website.

3
00:00:06,630 --> 00:00:09,270
And we're gonna make our own memes.

4
00:00:09,270 --> 00:00:12,120
You might've seen some of these around the internet.

5
00:00:12,120 --> 00:00:14,700
There are the serious ones, which are based

6
00:00:14,700 --> 00:00:17,037
off these nineties motivational posters,

7
00:00:17,037 --> 00:00:19,290
where you have some sort of title

8
00:00:19,290 --> 00:00:22,477
and you have some sort of motivational text, like,

9
00:00:22,477 --> 00:00:25,890
"Potential. We all have the tools for greatness within us."

10
00:00:25,890 --> 00:00:27,314
And I believe that is true,

11
00:00:27,314 --> 00:00:30,090
and you've got a cute little Arctic fox.

12
00:00:30,090 --> 00:00:32,737
But also there are some pretty hilarious ones like,

13
00:00:32,737 --> 00:00:34,440
"Coolness. You may be cool,

14
00:00:34,440 --> 00:00:36,870
but you'll never be four popped-collars cool,"

15
00:00:36,870 --> 00:00:38,220
like this guy.

16
00:00:38,220 --> 00:00:41,190
So the goal is to make our own website

17
00:00:41,190 --> 00:00:44,190
where we can create our own motivational poster.

18
00:00:44,190 --> 00:00:46,936
The important part of a motivational poster is

19
00:00:46,936 --> 00:00:50,220
there is a image that is going to be big.

20
00:00:50,220 --> 00:00:53,940
There is a border around the image,

21
00:00:53,940 --> 00:00:57,330
so we now know all about borders, and we can do that.

22
00:00:57,330 --> 00:01:01,528
We have a black background and that is easy,

23
00:01:01,528 --> 00:01:04,920
because we know all about CSS color properties.

24
00:01:04,920 --> 00:01:07,609
We have a big main title,

25
00:01:07,609 --> 00:01:10,830
which we're gonna use a customer font for

26
00:01:10,830 --> 00:01:14,126
to mimic this font a little bit better.

27
00:01:14,126 --> 00:01:17,760
And finally, we have a paragraph at the bottom.

28
00:01:17,760 --> 00:01:19,950
And we're going to figure out how we're going

29
00:01:19,950 --> 00:01:22,260
to center things on the screen,

30
00:01:22,260 --> 00:01:25,020
how to add borders, and how to apply basically

31
00:01:25,020 --> 00:01:28,740
everything that we've learned so far in this section.

32
00:01:28,740 --> 00:01:30,647
Go ahead and download the starting project files

33
00:01:30,647 --> 00:01:35,310
for the Motivation Meme Project, and extract it,

34
00:01:35,310 --> 00:01:38,430
and then open it up inside VS Code.

35
00:01:38,430 --> 00:01:39,780
I've created the task

36
00:01:39,780 --> 00:01:44,400
in a sort of to-do list breakdown for you.

37
00:01:44,400 --> 00:01:45,840
Now, the main thing is

38
00:01:45,840 --> 00:01:47,760
that it's your website, it's your project.

39
00:01:47,760 --> 00:01:49,961
And as with all the projects in the course,

40
00:01:49,961 --> 00:01:52,980
it's totally up to you how you want to create it.

41
00:01:52,980 --> 00:01:56,100
But there are some caveats, and it's important

42
00:01:56,100 --> 00:01:59,310
that you touch all of the learning points.

43
00:01:59,310 --> 00:02:02,430
So these six points are important.

44
00:02:02,430 --> 00:02:05,100
And after completing these six points,

45
00:02:05,100 --> 00:02:06,660
you can change your website,

46
00:02:06,660 --> 00:02:08,850
you can mess with it however you like,

47
00:02:08,850 --> 00:02:10,333
but I wanna make sure that everything

48
00:02:10,333 --> 00:02:13,710
you've learned so far has consolidated

49
00:02:13,710 --> 00:02:15,690
and it all makes sense.

50
00:02:15,690 --> 00:02:18,840
We're gonna use a custom font from Google

51
00:02:18,840 --> 00:02:21,450
called the Libre Baskerville,

52
00:02:21,450 --> 00:02:23,010
which looks somewhat similar

53
00:02:23,010 --> 00:02:26,620
to the motivational main title font.

54
00:02:26,620 --> 00:02:31,230
You should add your own image into the images folder,

55
00:02:31,230 --> 00:02:32,820
under the assets folder.

56
00:02:32,820 --> 00:02:35,430
I've got an example image in here for you,

57
00:02:35,430 --> 00:02:38,760
just in case you want to use it, but I recommend putting

58
00:02:38,760 --> 00:02:41,550
in your own images just for practice.

59
00:02:41,550 --> 00:02:45,626
And that image should have a five-pixel white border.

60
00:02:45,626 --> 00:02:48,404
And the text should be center aligned,

61
00:02:48,404 --> 00:02:52,100
and you should adjust the margin so that the image

62
00:02:52,100 --> 00:02:54,000
and text are centered on the page.

63
00:02:54,000 --> 00:02:55,883
Now this is gonna be the trickiest part

64
00:02:55,883 --> 00:02:59,280
because centering elements using CSS

65
00:02:59,280 --> 00:03:01,620
is a whole science in itself,

66
00:03:01,620 --> 00:03:03,338
but we're gonna do it simply.

67
00:03:03,338 --> 00:03:05,850
We're gonna horizontally center the div,

68
00:03:05,850 --> 00:03:08,220
by giving that div a width of 50%

69
00:03:08,220 --> 00:03:10,140
to take up 50% of the screen.

70
00:03:10,140 --> 00:03:10,973
And then if you think about it,

71
00:03:10,973 --> 00:03:13,710
there's only 25% left on each side.

72
00:03:13,710 --> 00:03:16,957
So if we have a margin left of 20% on that div,

73
00:03:16,957 --> 00:03:20,160
then it should push it into the center.

74
00:03:20,160 --> 00:03:23,130
In addition, you might find it useful to set the image

75
00:03:23,130 --> 00:03:24,570
to have a width of a hundred percent,

76
00:03:24,570 --> 00:03:27,450
so that it fills the entire container div,

77
00:03:27,450 --> 00:03:29,460
so that you're not having to center the image

78
00:03:29,460 --> 00:03:30,533
along with the div.

79
00:03:30,533 --> 00:03:32,250
Some of these hints are only gonna make sense

80
00:03:32,250 --> 00:03:35,130
once you get started writing the code for it.

81
00:03:35,130 --> 00:03:37,230
So don't worry too much about it now.

82
00:03:37,230 --> 00:03:39,180
I'm just highlighting certain points in the to-do,

83
00:03:39,180 --> 00:03:40,590
so that when you get to it,

84
00:03:40,590 --> 00:03:42,780
to pay more attention to these parts

85
00:03:42,780 --> 00:03:45,720
and these helpful tips, which you'll probably need,

86
00:03:45,720 --> 00:03:47,790
'cause especially this point number five,

87
00:03:47,790 --> 00:03:51,261
it's quite a difficult task and it will take some time

88
00:03:51,261 --> 00:03:54,543
for you to figure out how to get it to look like this.

89
00:03:55,620 --> 00:03:59,160
And if you want to push the div down vertically,

90
00:03:59,160 --> 00:04:02,310
then I recommend just adding a top margin

91
00:04:02,310 --> 00:04:04,860
to push it down by a pixel amount.

92
00:04:04,860 --> 00:04:08,130
It doesn't have to be spot bang in the middle of the center.

93
00:04:08,130 --> 00:04:11,070
'Cause as I said, that is a whole science in itself,

94
00:04:11,070 --> 00:04:13,268
and we're going to be covering in coming sections,

95
00:04:13,268 --> 00:04:15,750
but it's just a little bit more complicated.

96
00:04:15,750 --> 00:04:19,079
So we're gonna judge it by eye for this project for now.

97
00:04:19,079 --> 00:04:20,820
In order to get something that looks

98
00:04:20,820 --> 00:04:25,500
like the goal image, I recommend putting the H1,

99
00:04:25,500 --> 00:04:29,233
the paragraph, and the image inside a div.

100
00:04:29,233 --> 00:04:33,000
That way you can center the div on the screen,

101
00:04:33,000 --> 00:04:35,790
and you won't have to mess with all three elements

102
00:04:35,790 --> 00:04:39,213
and their centering, which is already a hard enough task.

103
00:04:40,290 --> 00:04:42,810
Finally, you're going to use

104
00:04:42,810 --> 00:04:47,810
your developer doc reading skills and learn by yourself

105
00:04:48,540 --> 00:04:51,180
about a property called Text Transform,

106
00:04:51,180 --> 00:04:55,230
and figure out how to make the H1 look uppercase,

107
00:04:55,230 --> 00:05:00,230
like what I've got in the solution goal website.

108
00:05:00,360 --> 00:05:01,656
All of these elements are on screen.

109
00:05:01,656 --> 00:05:04,243
We've got the white border around the image,

110
00:05:04,243 --> 00:05:06,447
we've got the black background, the white text,

111
00:05:06,447 --> 00:05:11,447
the custom font, and our H1 is totally in uppercase

112
00:05:11,880 --> 00:05:15,750
without us having to type it in uppercase.

113
00:05:15,750 --> 00:05:19,020
So that's where that text transform property comes in.

114
00:05:19,020 --> 00:05:21,870
And notice how this entire content div

115
00:05:21,870 --> 00:05:23,940
is roughly somewhere in the center,

116
00:05:23,940 --> 00:05:26,600
horizontally and vertically just judging it by eye.

117
00:05:26,600 --> 00:05:29,970
It's not perfect, but as long as you find

118
00:05:29,970 --> 00:05:33,630
the perfect avocado, everything else is easy in life.

119
00:05:33,630 --> 00:05:38,100
Pause the video now and complete this project.

120
00:05:38,100 --> 00:05:40,470
And once you're done, come back and I'm gonna walk

121
00:05:40,470 --> 00:05:42,220
through the solution code with you.

122
00:05:44,563 --> 00:05:47,520
All right, so hopefully that wasn't too hard.

123
00:05:47,520 --> 00:05:51,900
If we take a look at the solution HTML, you can see

124
00:05:51,900 --> 00:05:55,530
that I've completed all of those tasks

125
00:05:55,530 --> 00:05:59,100
with a small HML and a small CSS file,

126
00:05:59,100 --> 00:06:01,440
so it shouldn't be too hard.

127
00:06:01,440 --> 00:06:04,710
Now, some of the steps are pretty self-explanatory,

128
00:06:04,710 --> 00:06:05,760
but there's a couple of things

129
00:06:05,760 --> 00:06:07,980
that I want to just briefly touch on.

130
00:06:07,980 --> 00:06:11,759
One is you will need the Google font links

131
00:06:11,759 --> 00:06:14,040
in the head section

132
00:06:14,040 --> 00:06:19,040
if you want to be able to have that custom font on screen.

133
00:06:19,620 --> 00:06:22,290
And this is the custom font.

134
00:06:22,290 --> 00:06:26,220
In addition, we want to have all our elements

135
00:06:26,220 --> 00:06:29,260
inside a div so that we can style it all together.

136
00:06:29,260 --> 00:06:31,897
And that's quite important in terms of positioning.

137
00:06:31,897 --> 00:06:35,430
So I've created a class for the div.

138
00:06:35,430 --> 00:06:38,070
In this case, you could have also used an ID,

139
00:06:38,070 --> 00:06:41,160
but if you were going to extend this website,

140
00:06:41,160 --> 00:06:43,710
then it's safer to use a class so that you might

141
00:06:43,710 --> 00:06:46,890
be able to reuse the CSS in the future.

142
00:06:46,890 --> 00:06:51,890
The poster is the part that is more or less center aligned.

143
00:06:52,170 --> 00:06:54,540
And we use that trick with setting its width

144
00:06:54,540 --> 00:06:57,090
and setting its margin, using percentages

145
00:06:57,090 --> 00:06:59,610
to get it more or less in the horizontal center.

146
00:06:59,610 --> 00:07:02,700
And then I simply set a hundred pixel margin top,

147
00:07:02,700 --> 00:07:06,270
just judging it by eye to get it somewhere in the middle.

148
00:07:06,270 --> 00:07:10,440
And I added the custom font and the border

149
00:07:10,440 --> 00:07:15,270
to the image and made the image a hundred percent wide,

150
00:07:15,270 --> 00:07:18,873
so that it would fit fully into that poster div.

151
00:07:19,830 --> 00:07:21,840
If you had any problems,

152
00:07:21,840 --> 00:07:23,820
this is a time where you can look

153
00:07:23,820 --> 00:07:25,804
at the solution code and look at your own code,

154
00:07:25,804 --> 00:07:29,040
and see if there's any fixes you want to make.

155
00:07:29,040 --> 00:07:30,600
And once you have,

156
00:07:30,600 --> 00:07:33,480
then you can also modify the website any way

157
00:07:33,480 --> 00:07:36,543
you like to personalize it and make it your own.