We're going to look at another template tag in this video.

One that lets us refer to static media, like CSS, JavaScript, or

images in our templates.

This video has a new workspace attached to it, so

be sure you open it up fresh to get the wonderful assets from our designers.

Again, static assets, we have to do a bit of work with our settings and

our URLs, but it's nothing you can't handle.

Let's go do it.

We'll start using our static assets in our settings.py.

We need to add, at the bottom, a new attribute or a new setting.

So, the setting we're adding is STATICFILES_DIRS and is a tuple.

And inside that tuple, we're going to add the paths to locations for

Django to find our static assets.

So these are things like our CSS files, our images, our JavaScript, whatever.

So we're gonna use os.path.join.

OS is already imported up at the top, BASE_DIR,

which is our learning site dir, right here, or directory.

And then we're gonna join that with the word assets, and

since this is a tuple, it needs to have a comma at the end.

And so this says, hey, Django, if I ask you for

static stuff, go look in this directory.

So I have already created this directory for you, you can see there is a CSS folder

in here and I layout .css, don't worry about that, you don't need to edit them,

we're not gonna mess with those at all, we're just going to use them.

Before we can get to them though, we have to add a little bit more stuff.

Of course we do, right?

If we were deploying this live, this is somewhere on the Internet,

we would be using a server like Apache or Nginx or

a Windows Server and they would have a rule set up for how to find static stuff.

Because we don't want to use Python to serve static stuff.

But right now, we're just in development,

we're just messing with this on our own machine or in workspaces.

It's cool if Python serves as our static files.

So we have to tell Django how to do that.

So, let's hop over to our urls.py.

And up here at the top,

where we have these imports, we're going to add one more import.

From django.contrib.staticfiles.urls import

staticfiles, oops, files_urlpatterns.

Really long line, I know.

And so, down here at the bottom of this one, though.

We are going to then add urlpatterns +=

staticfiles_urlpatterns and

that happens to be a function, so we need to call it.

But what does this do?

What this does is, it checks to see if we're in debug mode,

which We are.

I knew that setting was in there somewhere,

I just couldn't remember where it was.

And if we're in debug mode then it adds a static path.

So, static/, that points to all of our files in our static folders.

But now we need to use this.

So how do we use that?

Well, let's go look at our layout template.

And up here in our head area, let's add a link

rel=stylesheet and

our href is going to be a new tag, static.

And css/layout.css.

And we close our quote, we close our thing there.

Now we do need to add one more thing which is, we need to do load static

from static files, because static is not loaded by default.

Not every site is going to need static files.

So, Django doesn't load that automatically.

The cool thing about using the static tag though, as opposed to,

there's, occasionally you'll see people do something like this.

STATIC_URL.

And, that's cool if your static URL never changes.

But, if you're going to be deploying your static assets onto something like S3 or

CloudFront, where it might change,

then you don't always want to have URL that never changes.

So we're gonna use the static tag and

the static tag can actually figure out what these new URLs are.

Which is really cool.

So we're gonna save that and then let's go refresh our page and

see if we get any CSS.

Oh and that's right, we got some, but we didn't apply any.

Let's add a little bit more stuff in here.

So inside of our body, we want to have a div and

our class needs to be site container and then let's.

All right.

Save. Refresh.

Cool, so we've got a site container.

We have just a little bit of styling, there's not a whole lot of stuff.

We will have a lot more styling as the course goes on.

Obviously, very few web apps can be complete without static assets and

ours is no exception.

Now that we have it looking all spiffy, let's see about adding another model that

will represent the video, or steps that belong to our courses.