All right, so let's go ahead and run through the solution.
The first thing I'm going to do is to head over
to the website and download the template.
Once I've downloaded the template,
I'm going to unzip the file and get access to all the files inside.
Now I've already set up my Flask server
which is pretty simple by now. I've created my app,
I've set up the home routes and I've set my app to run on debug mode.
Now I have to create the necessary directories.
So I'm going to need a directory called templates,
and I'm also going to need one called static.
With those two folders in place
I can now start moving over the relevant parts of these files; index.html
goes into templates, assets
and images go into static.
Right
Now,
one of the first things we're going to try and do is just to see if this works.
So we're gonna start up our server and try to render that index.html.
And if you've got another project running in the background
which is using our server address,
then you are going to get an error that says address already in use.
So just make sure you stop any other files from running and then run this again.
So here's our webpage with just the HTML. It's very,
very simple, and it doesn't have any of the styling or the images.
So we're going to have to fix that by going into the index.html and figuring
out which parts of it need to be changed.
Now notice that in the download, we got two folders;
assets and images which are now both inside static.
So we're going to have to find and replace anything that is assets and change
that to static/assets,
...
and also do the same with images,
right?
There's actually not a lot of code in here.
You can pretty much scroll from the top to the bottom and you can see there's
not a lot of stuff here.
So now that we've fixed those paths,
let's see if we can hit save and go back to refresh our website.
Now, if you are getting what I'm seeing here
which is the CSS file being rendered from the previous project where we got hold
of the portfolio site, that remember is because the CSS file is a static file and
it's being cached by the Chrome browser. So as I mentioned before,
you have to hold down shift and hit refresh in order to get the new static files
to come over. So now that we've got all of this,
it's time to actually edit the text and the links. Going into here,
we can see that here is the h1 which we can change quite easily,
...
and you can of course add your hrefs to these links for Twitter,
Instagram, Facebook,
copy your Twitter URL and change the Href here to that
if you wish.
And you can change the footer as well. Now,
remember because we didn't buy these templates and we're using it for personal
use, we should really attribute the source where we got it from.
So I'll just leave that as it is. Now, if I hit save,
you can see I've pretty much updated all the text to what I want.
And you can see that this avatar image has disappeared
and the reason is because when I was doing the finding and replacing,
I wasn't careful enough
and I didn't add in the final trailing slash
which should in fact be right here.
So this is going to now render the avatar image.
But of course at the moment,
it's just this blank gradient image inside the images folder.
So what we can do is we can simply replace it with our own image.
So, here in my downloads folder, I've got an image called angela.png.
So I'm going to move my own image into the images folder and refactor that.
And then back in our index.html,
I'm going to point towards that image by changing this file path.
So now I can go ahead and delete this avatar image.
And if I hit save and go back to my website,
you can see my photo now shows up inside the image.
The next thing I want to add is a background image under this gradient here.
So one of the best places to find great images for commercial use is a website
called Unsplash.
So if we look for some sort of image that we could put as the background,
maybe a beach or a sea,
you can see there's thousands of images that you can choose from.
And they all look incredibly beautiful, and they're all large, all HD.
I've decided to go with this picture of the seashore.
And if I go ahead and click on download free,
it should download the large JPEG image onto my computer.
So now I'm going to go ahead and rename that image to
the same name as the original background image
which is just a bg.jpeg.
Right.
Like that.
And now I can delete this file and replace it with my own background.
So remember that the background image here it is actually being rendered from
the CSS files.
And if you look inside the main.css you can see here where it sets the
background image,
it's actually generating a gradient and it's overlaying that on top of something
inside the images folder called bg.jpeg.
So instead of changing it all over here,
all we just did is just name our image the same as what they had before.
Now, if we go ahead and rerun our website,
go back to our website and hard reload,
remember by holding down shift and clicking on the reload button,
you can see that image has now been brought in behind this gradient.
Now the last step is to change that title so that it says our name instead of a
placeholder text. So let's go ahead and change the title
...
to our name and there we have it.
We're now serving up this beautiful website
which we got completely from a template that somebody else's developed.
And all we needed to do was to have enough understanding of HTML,
CSS and how Python servers work in order to customize it for our own purposes.
I hope you enjoyed building this with me
and I hope you'll look through some of the other templates and start messing
around with some of them to create your own custom websites.