All right guys,
it's time for another challenge to review what we learned in the last lesson.
Back when we learned CSS on days 43 and 44, the end project that we created
was a personal site that looks something like this.
It's beautifully designed with CSS styling,
images, gifs, and a whole lot more. Now,
what I want you to do is to take your version of this personal site 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.
Hopefully, you've got all your files lying around somewhere in your computer.
If you don't,
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 have 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 webpage 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 gonna replace this with static/images/. So we're basically
adding static to this images/. And if we go ahead and replace it in all five
places, then we should now be done with all of our refactorings.
Now let's go ahead and restart our file so that it looks at all of these new
image, 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 html
5up.net,
where they have beautiful free templates that you can tap into.
Now consider if you were 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 website's 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 paradigm shift.
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 read me 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.
Right.
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/assets.
Right?
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 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 got h1s,
all sorts of tags in here.
And you can edit it just like that. For example,
if we scroll up to 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 webpage
editable. So to write this, we tap into the document
which is this entire HTML document, and then we tap into the body
which has everything inside the body tag, which is the content of the website.
And then we can call on a property called contentEditable,
and we can set that to true. Now note here that in JavaScript,
the true booelan 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.
Cool.
All of these paragraphs or any bits of text is now completely editable.
Now, what if you want 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, 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 webpage 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 prebuilt 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 are 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.