Preview
Video Player
00:00
00:00
Static Files
4:14When you give a browser some HTML, it's going to want a CSS. We can't expect our users to be happy with just raw HTML, can we? Flask makes it easy for us to use CSS and JavaScript in our apps.
No website or app is complete without some
styling.
0:00
At the very least, you're gonna need a
logo.
0:03
But, let's not worry about images just
yet.
0:05
Flask makes static files just as easy as
templates.
0:08
Just add a directory and get busy.
0:11
Well, so first we have to add a directory,
like I mentioned.
0:13
Templates live in this Templates
directory.
0:17
This really cool directory.
0:19
And static files actually have their own
directory as well, called static.
0:22
Anything that we put inside here we can
reference as slash static,
0:28
which is pretty cool.
0:31
So, we're gonna add a new file in there,
which we will call styles.css.
0:33
I'm a big fan of making something look
kinda horrible and then refining it so
0:40
it looks nicer, so
0:43
I don't really want this style sheet to be
awesome right off the bat.
0:44
So I'm gonna put in some, some horrible
stuff here.
0:48
Let's do body.
0:50
Background is gonna be beige, and color
will be medium orchid.
0:52
I also love all the crazy color names that
CSS has.
1:00
So we've got beige and we've got medium
orchid, which is just horrid.
1:06
So now we need to add this to our HTML.
1:11
So we're gonna do that inside layout.html,
1:12
because we want this applied to every
page.
1:15
So we're gonna add this to here below the
title.
1:17
We're gonna do link rel equals stylesheet.
1:19
And then href is gonna start with /static,
1:23
which is just a nice little thing that
Flask gives us to where we can
1:26
always refer to our static directory as
slash static during development.
1:30
And then we call the file styles.css, so
that's what we're gonna reference here.
1:34
Okay.
1:39
Let's refresh and see if it works.
1:40
It does!
It's a wonderfully, amazing design site.
1:43
Okay actually that's, that's kind of
hideous.
1:48
Let's, let's make it black on the beige.
1:49
So our color, we can actually just take
out that color altogether.
1:52
And we just refresh.
1:57
Yeah, there we go.
1:58
Okay, that's a lot better.
1:59
I can, I can live with that one.
2:01
Let's add a little bit of JavaScript to
the site, shall we?
2:03
So File > New File.
2:06
We're gonna call this scripts.js, cuz I'm
very clever in naming.
2:09
And I just want to have this do like, an
alert box, nothing nothing crazy.
2:15
So we're gonna do alert, Howdy!
2:20
Cuz that's a cool thing to do.
2:25
And then we're gonna go add that into our
layout file.
2:28
So down here before the end of the body,
script source equals static scripts.js.
2:32
And, we refresh.
2:41
And hey, we've got a Howdy!
2:44
So, that's pretty cool.
2:47
But, you know what?
I
2:50
don't want this to happen on every single
page.
2:50
I want this to just happen on the home
page.
2:52
Because it can be really annoying if every
time I want to add, it just,
2:55
that's horrible.
2:59
So, let's go add a new thing.
3:00
So, what we're gonna do here is, let's do
this block scripts.
3:02
All right?
And then we're going to cut this part out.
3:11
So now we have this new block, scripts
block.
3:15
And on our index page, we're gonna add in
our scripts block.
3:18
All right.
3:27
And then if we refresh this, on the ad
page we shouldn't get anything.
3:31
But if we come over here to the home page,
it says Howdy!
3:37
Cool, so we got exactly what we wanted
there.
3:42
Well at least I got what I wanted.
3:46
Maybe you want it to be on every page, I
don't know.
3:48
But, this highlights a important thing of
how easy it
3:51
is to use blocks to control what pages
certain styles or scripts show up on.
3:54
So feel free to experiment with this.
3:59
Add some more cool stuff in if you want
to.
4:01
With those design and JavaScript skills, I
think I'm teaching the wrong subject.
4:03
Okay, maybe not.
4:07
In our next stage, we're going to use all
the things we've learned to build
4:09
a fully functional single page web app.
4:11