Instructor: All right, so for the final project,
we're gonna be building a motivational poster website.
And we're gonna make our own memes.
You might've seen some of these around the internet.
There are the serious ones, which are based
off these nineties motivational posters,
where you have some sort of title
and you have some sort of motivational text, like,
"Potential. We all have the tools for greatness within us."
And I believe that is true,
and you've got a cute little Arctic fox.
But also there are some pretty hilarious ones like,
"Coolness. You may be cool,
but you'll never be four popped-collars cool,"
like this guy.
So the goal is to make our own website
where we can create our own motivational poster.
The important part of a motivational poster is
there is a image that is going to be big.
There is a border around the image,
so we now know all about borders, and we can do that.
We have a black background and that is easy,
because we know all about CSS color properties.
We have a big main title,
which we're gonna use a customer font for
to mimic this font a little bit better.
And finally, we have a paragraph at the bottom.
And we're going to figure out how we're going
to center things on the screen,
how to add borders, and how to apply basically
everything that we've learned so far in this section.
Go ahead and download the starting project files
for the Motivation Meme Project, and extract it,
and then open it up inside VS Code.
I've created the task
in a sort of to-do list breakdown for you.
Now, the main thing is
that it's your website, it's your project.
And as with all the projects in the course,
it's totally up to you how you want to create it.
But there are some caveats, and it's important
that you touch all of the learning points.
So these six points are important.
And after completing these six points,
you can change your website,
you can mess with it however you like,
but I wanna make sure that everything
you've learned so far has consolidated
and it all makes sense.
We're gonna use a custom font from Google
called the Libre Baskerville,
which looks somewhat similar
to the motivational main title font.
You should add your own image into the images folder,
under the assets folder.
I've got an example image in here for you,
just in case you want to use it, but I recommend putting
in your own images just for practice.
And that image should have a five-pixel white border.
And the text should be center aligned,
and you should adjust the margin so that the image
and text are centered on the page.
Now this is gonna be the trickiest part
because centering elements using CSS
is a whole science in itself,
but we're gonna do it simply.
We're gonna horizontally center the div,
by giving that div a width of 50%
to take up 50% of the screen.
And then if you think about it,
there's only 25% left on each side.
So if we have a margin left of 20% on that div,
then it should push it into the center.
In addition, you might find it useful to set the image
to have a width of a hundred percent,
so that it fills the entire container div,
so that you're not having to center the image
along with the div.
Some of these hints are only gonna make sense
once you get started writing the code for it.
So don't worry too much about it now.
I'm just highlighting certain points in the to-do,
so that when you get to it,
to pay more attention to these parts
and these helpful tips, which you'll probably need,
'cause especially this point number five,
it's quite a difficult task and it will take some time
for you to figure out how to get it to look like this.
And if you want to push the div down vertically,
then I recommend just adding a top margin
to push it down by a pixel amount.
It doesn't have to be spot bang in the middle of the center.
'Cause as I said, that is a whole science in itself,
and we're going to be covering in coming sections,
but it's just a little bit more complicated.
So we're gonna judge it by eye for this project for now.
In order to get something that looks
like the goal image, I recommend putting the H1,
the paragraph, and the image inside a div.
That way you can center the div on the screen,
and you won't have to mess with all three elements
and their centering, which is already a hard enough task.
Finally, you're going to use
your developer doc reading skills and learn by yourself
about a property called Text Transform,
and figure out how to make the H1 look uppercase,
like what I've got in the solution goal website.
All of these elements are on screen.
We've got the white border around the image,
we've got the black background, the white text,
the custom font, and our H1 is totally in uppercase
without us having to type it in uppercase.
So that's where that text transform property comes in.
And notice how this entire content div
is roughly somewhere in the center,
horizontally and vertically just judging it by eye.
It's not perfect, but as long as you find
the perfect avocado, everything else is easy in life.
Pause the video now and complete this project.
And once you're done, come back and I'm gonna walk
through the solution code with you.
All right, so hopefully that wasn't too hard.
If we take a look at the solution HTML, you can see
that I've completed all of those tasks
with a small HML and a small CSS file,
so it shouldn't be too hard.
Now, some of the steps are pretty self-explanatory,
but there's a couple of things
that I want to just briefly touch on.
One is you will need the Google font links
in the head section
if you want to be able to have that custom font on screen.
And this is the custom font.
In addition, we want to have all our elements
inside a div so that we can style it all together.
And that's quite important in terms of positioning.
So I've created a class for the div.
In this case, you could have also used an ID,
but if you were going to extend this website,
then it's safer to use a class so that you might
be able to reuse the CSS in the future.
The poster is the part that is more or less center aligned.
And we use that trick with setting its width
and setting its margin, using percentages
to get it more or less in the horizontal center.
And then I simply set a hundred pixel margin top,
just judging it by eye to get it somewhere in the middle.
And I added the custom font and the border
to the image and made the image a hundred percent wide,
so that it would fit fully into that poster div.
If you had any problems,
this is a time where you can look
at the solution code and look at your own code,
and see if there's any fixes you want to make.
And once you have,
then you can also modify the website any way
you like to personalize it and make it your own.