All right. 1
So for the final project, we're going to be building a motivational poster website and we're going 2
to make our own memes. 3
You might have seen some of these around the Internet. 4
There are the serious ones which are based off these '90s seconds motivational posters where you have 5
some sort of title and you have some sort of motivational text like, "POTENTIAL." 6
"We all have the tools for greatness within us," and I believe that is true, 7
and you've got a cute little Arctic fox. 8
But also there are some pretty hilarious ones like "COOLNESS." 9
"You may be cool...but you'll never be 4 popped-collars 10
cool," like this guy. 11
So the goal is to make our own website where we can create our own motivational poster. 12
The important part of a motivational poster is there is an image that is going to be big, 13
there is a border around the image, 14
so we now know all about borders and we can do that. 15
We have a black background and that is easy because we know all about CSS color properties. 16
We have a big main title, which we're going to use a custom font to mimic this font a little bit 17
better. 18
And finally, we have a paragraph at the bottom. And we're going to figure out how we're going to center 19
things on the screen, how to add borders and how to apply basically everything that we've learned so 20
far in this section. 21
Go ahead and download the starting project files for the Motivation Meme Project and extract it and 22
then open it up inside VS Code. 23
I've created the task in a sort of TODO list breakdown for you. 24
Now the main thing is that it's your website, it's your project, and as with all the projects in the 25
course, it's totally up to you how you want to create it. 26
But, there are some caveats and it's important that you touch all of the learning points. 27
So these six points are important, and after completing these six points, you can change your website, 28
you can mess with it however you like, but want to make sure that everything you've learned so far 29
has consolidated and it all makes sense. 30
We're going to use a custom font from Google called The Libre-Baskerville, which looks somewhat similar 31
to the motivational main title font. 32
You should add your own image into the images folder under the assets folder. 33
I've got an example image in here for you just in case you want to use it, but I recommend putting 34
in your own images just for practice. 35
And that image should have a 5px white border and the text should be center-aligned and you should 36
adjust the margin so that the image and text are centered on the page. 37
Now, this is going to be the trickiest part because centering elements using CSS is a whole science 38
in itself, but we're going to do it simply. 39
We're going to horizontally center the div by giving that div a width of 50% to take up 50% of the screen, 40
and then if you think about it, there's only 25% left on each side. 41
So if we have a margin-left of 20% on that div, then it should push it into the center. 42
In addition, you might find it useful to set the image to have a width of 100% so that it fills the 43
entire container div so that you're not having to center the image along with the div. 44
Some of these hints are only going to make sense once you get started writing the code for it, so don't 45
worry too much about it 46
now, I'm just highlighting certain points in the TODO so that when you get to it, to pay more attention 47
to these parts and these helpful tips, which you'll probably need because especially at this point, 48
number five, it's quite a difficult task and it will take some time for you to figure out how to get 49
it to look like this. 50
And if you want to push the div down vertically, then I recommend just adding a top-margin to push 51
it down by a pixel amount. 52
It doesn't have to be spot bang in the middle of the center because as I said, that is a whole science 53
in itself and we're going to be covering it in coming sections, but it's just a little bit more complicated. 54
So we're going to judge it by eye for this project for now. In order to get something that looks like 55
the goal image, I recommend putting the h1, the paragraph, and the image inside a div. 56
That way you can center the div on the screen and you won't have to mess with all three elements and 57
their centering, which is already a hard enough task. 58
Finally, you're going to use your Developer D oc reading skills and learn by yourself about a property 59
called text-transform and figure out how to make the h1 look uppercase like what I've got in the solution 60
goal website. 61
All of these elements are on screen. 62
We've got the white board around the image, we've got the black background, the white text, the custom 63
font and our h1 is totally in uppercase without us having to type it in uppercase. 64
So that's where that text-transform property comes in. 65
And notice how this entire content div is roughly somewhere in the center, horizontally and vertically, 66
just judging it by eye. 67
It's not perfect, but as long as you find the perfect avocado, everything else is easy in life. 68
Pause the video now and complete this project and once you're done, come back and I'm going to walk 69
through the solution code with you. 70
All right. 71
So hopefully that wasn't too hard. 72
If we take a look at the solution HTML, you can see that I've completed all of those tasks with a small 73
HTML and a small CSS file, so it shouldn't be too hard. 74
Now, some of the steps are pretty self-explanatory, but there's a couple of things I want to just 75
briefly touch on. 76
One is you will need the Google font links in the head section if you want to be able to have that custom 77
font on screen. 78
And this is the custom font. 79
In addition, we want to have all our elements inside a div so that we can style it all together, 80
and that's quite important in terms of positioning. 81
So I've created a class for the div. 82
In this case, you could have also used an ID, but if you were going to extend this website then it's 83
safer to use a class 84
so that you might be able to reuse the CSS in the future. 85
The poster is the part that is more or less center aligned and we used that trick with setting its width 86
and setting its margin, using percentages to get it more or less in the horizontal center. 87
And then I simply set a 100px margin-top, just judging it by eye to get it somewhere in the middle. 88
And I added the custom font and the border to the image and made the image 100% wide so that it would 89
fit fully into that poster div. If you had any problems 90
this is a time where you can look at the solution code and look at your own code and see if there's 91
any fixes you want to make. 92
And once you have, then you can also modify the website any way you like to personalize it and make 93
it your own.