Welcome back.
Let's figure out how to add CSS and JavaScript to, well, our index.html because if you remember we
are using script and CSS in here.
Now once again with Flask.
If we go to, let's say, CSIS, we see that there's static files.
Static files simply means it's a file that's never going to change.
That is CSS and JavaScript.
Usually once we send them out, they're not going to change their static.
And you see over here that with Flask we have to store the files on the file system as static slash
style docs, so we need to create a static folder.
Again, this is something that you just have to get used to.
But let's say in here we'll create just like we did with templates, we're going to create a static
folder so that the Flask app knows to look in here for CSS and JavaScript files.
So I'm going to move the JavaScript file.
To the static folder.
And do the same with the CSS file.
So once again, move that.
To static.
Now, if I just save this and run, you'll see that it won't actually work.
Well, why is that?
Can you figure it out?
Again because we haven't talked too much about HTML and CSS and JavaScript.
Don't worry if you didn't get this, but if you remember in our indexed HTML file, we reference these
files inside of here.
But the file paths have now changed.
They're now in the static folder.
Like this.
So I have to say static.
Script dogs.
If I now go back.
And refresh.
Hey, look at that.
My beautiful green website for let's say this is Christmas website is now working if I open up the developer
tools.
Go to network and refresh.
Hey, check that out.
I have my document.
Then I have my JS file.
And why is there no CSS?
Let me refresh again.
Oh, there it is, right over there.
We have style CSS.
We have JS and we have the document.
Awesome.
If you're wondering why we're getting this little fab icon error, fab icon is the little icon that
shows up on tabs over here.
So we can actually even add our own fab icon if we wanted to and send images.
And the way we would do that is to again in our endpoint, let's instead of the blog, I'm going to
say fab icon dot iko for icon and we can just send it an image.
Hmm.
How will we go about doing this?
I'm going to show you the answer in the next video, but I want you to give it a try and figure out
how you can send an image back to this endpoint so that we don't get this error.
And when a browser automatically requests for this, which all browsers do, it's going to show up a
little icon over here for us.
So pick whatever icon you want and see if you can solve it in the next video.
I'll show you the answer.