Okay.
So we're at the end of this project.
All we have left is to style it.
And it's kind of funny.
I think for a lot of people this is the most exciting part, even though it has like the least to do
with the course.
But I get it.
It's nice to have it.
Something visual to make it look nice.
If you know CSS, skip this, you can just copy the style sheet in.
Take a look at what I did.
This is not going to be like I've said a couple of times, not a course on X, it's not a course on
CSS.
So what I'm going to do is rather than spending 2 hours of video going over, styling this one piece
at a time and talking about my workflow and why I'm doing certain things, what I've done is just copied
over the finished style sheet and our finished markup, but we still have our empty mark or basic markup
and we don't have a style sheet.
So what I'm going to do is just walk through and kind of copy bit by bit over and explain what chunks
do, but not everything.
And these two files, you can also you can find yourself, they're not in the slides, they're too large.
But I've included them along with this video so that you can copy from there, unless you're someone
who likes to type things manually, which some students do.
Okay.
So again, these are two files that are not connected to our app.
These are the solution files I'm going to refer back to.
But for now we're stuck with this, our basic HTML, and we don't even have a way of styling it.
And for those of you who don't know CSS or know what it is, it's how we add style color font images.
Well, how we add images generally, but it's how we can add a background image to something using CSS.
And the way we usually write that is by creating an external style sheet, a CSS file, and writing
our styles in there like this.
So we need a way to actually connect them.
And I'm not going to go into too much detail, but so usually what we do looks like this we'd have a
link rel equals stylesheet.
This is an HTML tag that includes an external stylesheet.
So if I do that and I just paste that in here, there's two problems.
One, we don't even have an apt CSS created, but two, Express isn't going to know about it.
Hi Blue.
What we can do is start off by creating a new directory.
And this is just a conventional name.
I'm going to call it public.
That's kind of standard for a web app, but you can call it whatever you want.
And inside of there, I'm going to create a file called Dot CSS.
Like that.
And then we'll put our code in here.
And let's start with something really simple, like turn the whole body, make it color purple.
So all our text is purple.
Oh, like that?
Color purple.
Oh, blue.
Hey.
My cat just attacked me.
Okay.
Why don't you let me record?
Okay.
Hang on.
I'll be back.
I got to handle this.
All right.
That's been handled.
Crazy cats.
So back where we were.
We've got our body color purple.
This is not connected to our app.
If it were.
Then our text would be purple.
But it's not.
So how do we get it connected?
Well, there's a problem.
Long story short, we need to add this line.
So this is another app use.
And this tells express if I go into our main file here, app JS.
Just add it with the other app use.
Keep all our configuration and it's basically saying take whatever is in the public directory, which
is right here.
Take all the contents and serve them so they're accessible by our views or from our JavaScript.
So now if I restart the server app, CSS is going to be available to this file.
Hopefully.
And if we refresh the page, we now have purple text.
So we now have a stylesheet connected.
And if you had just as a quick aside, if you had multiple different views here and you wanted them
to have the same stylesheet, you could use this line in all of them.
Or there's actually a better way, which I'm not going to talk about in this course called partials,
where you can basically have code that runs on all of your views, but you could also have a separate
stylesheet for different views if you wanted to just put them all in public.
Okay.
So that's the first simplest thing.
The next thing you'll notice in the finished markup is there's also a Google API or a Google font that
I included.
So I'm going to put that in here too.
This is for a font called Roboto.
Pretty common one if you're not familiar with Google Fonts, really great resource free fonts that you
can use on your own websites and they look good.
So now let's also go back to our finished CSS and let's copy some of this body stuff over, for example,
font family.
Let's start with that.
So we don't want things to be purple, we can get rid of that, but let's change the font so that we
now are using that Roboto font.
There you go.
Our font has changed.
Slowly getting there.
Next thing that we'll do if we go back to our CSS is we'll take the color and the text shadow and the
text the line.
So I don't need font family again.
I'll get rid of that.
So line this up.
Okay.
So this color is like a slightly purply gray, if I remember.
And we've got this, this slight shadow, which I don't know if you could pick up on on the original.
We're getting close.
Well, that's a lie, but we're getting close to being done with body.
Then we've got a couple other things.
First off is the background image.
And if I just show you this image and its entirety is a massive image of a beautiful mountain in Argentina
down in Patagonia that I took on a backpacking trip is called Satori and yeah, that's my little plug
for my photography.
Maybe I'll have a photography course one day.
So here's this photo that we'll use.
We just need the URL and we're setting the body's background image to that photo.
Save and refresh and it worked.
But you can see it kind of just looks like a solid color, but it's using the image.
It's just so big that it's taking up the, you know, I don't know, five or six of these screens or
more.
So that's actually something that if this is a real app, it would be good to just use a smaller image.
So we're not loading such a big image, but what we can do is use background size and set that to be
cover.
And now it will basically take the image and make sure it covers the entire background.
So we've got that getting a little closer now.
The next thing that we can do, if we scroll down, we'll come back to this flex container.
We've got our H one and our paragraphs, and if you notice, I'm setting the font weight to be 100.
I'm actually going to get rid of that in both of them.
There's a better thing that I can do, which is just sent the set, the font weight to be 100 in the
body.
And what that will do is just make our font thinner so that we get this thinner text.
So we've done that.
And let's see, moving on, let's work on the H one next.
So the H one, this giant or what's not giant yet but this.
Join us.
That will be giant in a bit.
We've got a couple of things that we're doing.
We've got we're setting well, let's just copy it all over margin to be zero font size, 500 pixels.
Line height is 400 pixels.
Okay.
So it looks massive right now, and that's because I'm super zoomed in.
So it's not as massive now.
It still is big, but nowhere near as bad.
So we've got join us and that's big looking relatively good.
What we want to do, of course, is position it downwards.
But I'm going to wait to talk about that.
So we'll move on to the next thing.
We've got our paragraph that we can style and really all we're doing for the paragraph is changing the
font size.
So this here.
It gets bigger.
Then after that, we're onto the form and the button.