As we saw previously when we rendered the HTML page of our CV,
one of the components is an image tag and it has a image file that it needs to
render. But it looks pretty broken when we rendered HTML.
So if we go ahead and open up the Chrome developer tool
which is under view, developer, and developer tools,
then if we go to console
you'll see that we actually get a bunch of 404 errors and they relate
to the styles.css file as well as the angela.png file.
That is what this is referring to.
And you can actually see
we get the same 404 errors when we look at the debug log in here as
well. So we're missing some stuff basically. Well, firstly,
let's see if we can recover it.
We can go ahead and save this image from the website
which I'll just call angela.png.
And then we can drag this image into our personal site.
And there it is right there. Now, in my case,
my image actually happens to be a circular one
which I edited in Photoshop,
but you might just have a square one and it doesn't matter at all.
Now that we've got our image inside our project,
how do we make sure that that image actually gets rendered in our HTML site?
Because here is the image tag and it's looking inside Angela's personal site
files for angela.png, which is not what we have here.
In fact, if we had moved this PNG file to the same
folder so they're on the same hierarchy, basically inside the same folder,
well then we could probably just change this to angela.png.
If I go ahead and restart and rerun my server after I've added in all these
files and I go to my personal site and I hit reload,
you'll see that there's still no photo. So why is that? Well,
back to the Flask documentation we go.
The reason is because, just like our templates have to be inside a folder called
templates, Flask will look for all your static files
like your images or your CSS files inside a folder called static.
So you have to put it inside a folder called static.
They made the framework, they make the rules. So inside our project
my-personal-site, let's create a new directory called static and let's move our
image into that static folder.
Now inside our angela.html, when we want to point to that image,
then the path is going to be static/ the name of the file inside
that folder, which in my case is angela.png. Now,
if I go ahead and rerun my application,
then go back to my homepage and refresh,
you should see that image being rendered.
It was able to look inside the static folder and find that image.
Whenever you create a Flask application, 9 out of 10 times
you'll need to create it with the templates folder and the static folder.
And you put all your static files like your CSS files or your images or your
videos inside that folder
and your file path is relative to that folder.
And then when you create your HTML templates,
you're going to put it inside the templates folder.
Now going back to my project,
I'm going to delete all the extra files that we created just now in the demo.
Right.
And I should now only end up with my index.html
which is our simple website. Now,
the reason why I wanna keep it simple is just so that you really understand
everything from the ground up.
And the challenge I've got for you is to go ahead and create a CSS style sheet,
and then using the style sheet
change the background of the body of this index.html website to purple.
That's the goal. You are going to have to change the server.py,
you're going to have to change the index.html,
and you're going to have to create a CSS file.
Pause the video and see if you can complete this challenge.
Right.
All right. The first thing we're going to do is create a CSS file.
That is going to be a static file.
We're going to create it inside the static folder.
So I'm going to call it styles.css
and now I'm going to go ahead and target the body of my website to the body tag,
and then I'm going to change the background color to purple
like this.
So very simple CSS code here. Now that when it's run is going to target this body
tag which is basically the body of our website
and hopefully it's going to turn the background purple. Now,
in order for that CSS to work though,
we're going to have to add it into the head of our HTML file just as we've done
it thousands of times before when we did the lessons on CSS and HTML.
In order to add that in, we're going to create a link element
which is going to have a relationship. Now,
the relationship is going to be a style sheet.
So it's basically telling the HTML file that this link points to a style sheet.
And then the href of the style sheet is going to be inside static/
styles.css.
Now let's go ahead and save both of these files and go back to our server and
make sure that we're rendering that HTML template which is index.html.
And now if we go ahead and stop and restart this project so that it takes into
account all the new files, and then we go to our homepage,
hopefully it should show you a page that has a purple background
like you see here. Now,
one of the things you have to be careful about Chrome is that it likes to cache
your static files. So what does this mean? Well,
let's go back to the styles.css and I'm going to change that background-color
to red. Now I'm going to hit save on this file.
I'm even going to stop and rerun my file,
but you can see if I refresh this page, it's still purple.
And if I go into the Chrome developer tools and we take a look at our elements,
you can see that the body still has CSS saying that the background color should
be purple. If we go to the sources inside the static folder,
there's our styles.css. And you can see
this is an older version of our style sheet. So what's going on?
Is it because we didn't save this change? No, we definitely saved it.
What's actually happening is that to save your internet usage,
Chrome likes to cache the style sheets and other static files,
so images or JavaScript.
and the reason why it does that is because when you visit a website,
if you're visiting it on the same day,
these static files are unlikely to change.
A website is unlikely to update their CSS or their images over one day.
So once the browser downloads it,
it keeps hold of those static files.
This just means that you don't have to keep downloading these large files every
single time you hit up the same website.
That's kind of good if we are in fact visiting a real live website.
But when we're testing, it's a little bit confusing.
So one of the things you have to do is you have to get Chrome to hard reload.
And you can do that by holding down the shift key and clicking on this refresh
button, which is going to do a hard reload.
And it's going to get rid of all the cached files and pull in any new files.
So now the background changes to red. And we can confirm that by... let's change
this to blue hit save on that file, holding down shift, reload,
and we get the blue background updating.
So that's just something to be careful about when you find that your CSS files
or your other static files are not being changed or not being rendered.