All right, guys, it's time for another challenge to review what we learn in the last lesson.
Now, what I want you to do is to take your version of this personal site that looks something like
this.
It's beautifully designed with CSS styling, images, GIFs, and a whole lot more.
And get it to run with your Python server.
And in the process, you'll review what you learned about rendering HTML files, as well as serving
up static files.
You can go ahead and head over to the course resources, where I've included a link to download all
of these files as a zip file.
Once you've unzipped that zip file, you should end up with a folder that looks like this.
We've got our favicon, our CSS folder with our styles.css, our image folder with all four images,
and you want to move these files to their respective places inside the personal site.
Feel free to go ahead and delete the index.html and the styles.css and see if you're able to use the
files that you've got here to render it using your Python server.
Pause the video and give that a go.
All right, so the first thing we need to do is to move the files in here to their respective places.
The index.html is going to go inside the templates folder, but pretty much everything else is going
to go inside the static folder.
So that includes the CSS, the favicon, as well as the images folder.
Now that we've moved everything in here, there's actually nothing we need to do inside our server.py
because it's still trying to render a web page called index.html, which in our case it's still called
index.html.
Now, the thing that we do have to change, though, is inside our index.html it's pointing straight
towards CSS Styles.css, and also for the favicon, it's pointing straight to the favicon file.
What we need to do is to take into account that it's now living inside a folder called static.
So we're going to have to add the full file path to anywhere where we have a local static file being
used.
So that includes the CSS that includes the favicon.
Also, any of the images that we're using in here.
And if you want for sort of convenience sake, you can actually just copy this part which is the source
of the images.
And then you can hold down command R on Mac or control R on windows to bring up the find and replace.
And we're going to replace this with static slash images slash.
So we're basically adding static to this images slash.
And if we go ahead and replace it in all five places then we should now be done with all of our refactoring.
Now let's go ahead and restart our file so that it looks at all of these new images.
And let's go to our website which is being served up by Python.
And hopefully you have the same result as I do, which is the same personal site, but now served up
with our Python server.
Now this process has been pretty pain free.
I would say we simply moved in the required index.html, the CSS images and the favicons.
So all the files that make up a particular website and we simply added it to our flask project.
Now what you can also do is you can get templates of HTML and CSS files from the internet.
For example, a website like HTML5, ASP.Net where they have beautiful Feel free templates that you
can tap into.
Now consider if you are creating your own personal site, then you can pick from all of these beautiful
HTML templates, which you can then update and personalize.
For example, if we take this first one, we can go ahead and see it as a live demo.
So we can see this website as it is and we can see how cool it looks.
It's got buttons, it's got JavaScript, it's got beautiful CSS styling.
And this might be a really good website for, say, keeping track of our portfolio, like the websites
that we're building to have images of the websites, a link to the website, some brief description.
And then we could just put this up online.
And whenever we want to get hired as a web developer, we could point people towards it.
So how do we make this work with Python?
Well, the first thing we have to do is simply hit download, and it's going to download all of the
files that make up this website.
Now remember that because we're getting it for free.
We need to attribute the designer who created this website.
If you don't want to attribute it and you want to use it for commercial use, then you can pay just
$19 and access all of their templates as well as support from the creator.
Now compare that to a service like Squarespace, where you're basically getting the same service templates
for your website.
But in this case, you're going to be paying anywhere between 10 to $30 per month, which is a lot more
expensive.
But it's great if you don't know web development, but we're not going to be in that camp anymore.
Let's go ahead and unzip that file that we just downloaded, which was called Paradigmshift.
And we're going to try and transfer these files to our website over here.
So again I'm going to go ahead and delete all of the previous files that's inside my static and templates
folders.
And I'm going to try and move the relevant parts of this new website over.
So here they've got an index.html, a Readme text, and a license text.
So all we need is to move our index.html to the templates and the images and assets over to the static
folder.
Now, one of the things to note is when you're looking at the demo, there's all of these beautiful
pictures.
But of course the designer doesn't have the rights to these pictures to distribute.
So you'll notice that all the images inside the images folder are these sort of gradients.
So don't be worried if when you run your website you just see a bunch of blurry gradients, it's not
a problem.
Now what we want to do is we want to see if we can get this index.html to work when it's being served
up by our server.
Now, the first thing we can do is simply just restart our project, rerun it, and see what it looks
like.
So let's refresh this static page and you can see it's got all of the HTML, but no styling and no images.
So that is probably because we're not specifying the static folder in the path.
So here we've got our assets and here we've got an image.
But they're both inside the static folder.
So we can do that quick trick with find and replace.
So for anything that's inside the images folder we're going to replace it with static images.
And for anything that's inside the assets folder we're going to replace it with static dot assets.
And now if we go ahead and hit save and refresh this page, you can see it's now rendering the images
as these sort of gradients.
And it's also rendering the styling and CSS.
Now how would you edit this.
Well the easiest way is of course, to actually just edit this raw HTML so you can take any of this
HTML and you already understand what most of it does.
You've got tables, you've got headings, you've got H1, all sorts of tags in here.
And you can edit it just like that.
For example, if we scroll up to the very top, we can change the title to a name, for example Angela's
Portfolio.
And we can change the H1 which says Paradigm shift to our own name, for example.
And now when I hit save and I refresh over here, you can see all of that being reflected.
Now there's an even better way of editing HTML in Chrome, all thanks to the Chrome developer tools.
If we open up the Chrome developer tools and go to the console, we can actually type a little bit of
JavaScript to make anything on our web page editable.
So to write this, we tap into to the document, which is this entire HTML document.
And then we tap into the body, which is everything inside the body tag, which is the content of the
website.
And then we can call on a property called Content Editable, and we can set that to true.
Now note here that in JavaScript the true boolean is spelled out with a lower t, not capital T like
in Python, but the rest of it is pretty standard code, and we can all understand that.
Now once I hit enter and that goes through, I can close down this pane.
And now watch this.
I can now edit anything that's on this website.
All of these paragraphs or any bits of text is now completely editable.
Now what if you wanted to delete some of these elements?
What would be the easiest way to do that?
Well, you can simply open up the Chrome developer tools and then we can use this little button here
to select any element.
So maybe we want to get rid of this paragraph here.
I can select it.
It locates it in the HTML.
And I can just hit backspace.
So I can select any part of the HTML elements that I don't like.
For example, if I want to get rid of this whole section, well I would select it and then delete it.
Maybe I could delete some more sections and make this a lot simpler.
Now you can see this website just has two sections my name and my contact details.
One of the unfortunate things, though, is that all of the changes that you're making here, even though
you can see it and it's great, as soon as you hit refresh, all of those changes will disappear.
And the reason is because when you hit refresh, what's happening is your browser is going to your server
at this address and requesting all of the HTML and CSS files, which of course comes from over here.
So this is unchanged by what we've done just now.
It's completely not changed at all.
So if you want all of these changes that you've made in the HTML, then what you have to do is actually
save this web page as it is, and then you can move this HTML into your templates, and you can see
that this is now a lot shorter with all of the changes that we made previously.
And you can replace this with what's inside your index.html.
This is probably one of the easiest ways of modifying a pre-built template, and you can see that there's
plenty of templates for you to play around with.
In fact, in the next lesson, when we're creating our final project, you're going to be editing this
identity template completely from scratch, and you're going to be creating a digital name card.
So have a play around, and once you're done, head over to the next lesson and complete the final project.