Welcome back.
So we've learned the basics of flask.
We understand what servers do and we also know what browsers do.
But let's be honest here.
This is kind of boring.
I mean, this is not impressive.
If you show this to a possible employer, they're going to look at you like a crazy person.
So let's actually build a nice looking portfolio just based on what we've learned up until now.
Now, I have a little gift for you.
That is the fact that you won't have to write your own HTML, CSS and JavaScript because again, this
isn't a web development course.
And luckily for us, if you Google anywhere online for something like free templates or HTML free templates,
you can find some really nice looking websites that you can just use for free.
For example, let's look at Universe over here and I'll link to this resource so you can take a look
for yourself as well if I preview it.
Check that out.
You have a nice little website or portfolio page that you can just use.
How cool is that?
And it's actually already tablet and mobile friendly, so everything is already pre built for you.
That's pretty cool, right?
So how can we use this?
Well, let's just download it.
And by the way, as you follow along, you can actually use whichever one of these you want.
But for now, let's just use the universe one.
Just because there's a little astronaut here, it looks pretty cool.
Let's just download this and see what happens.
All right, I get a little question saying, how do we want to download the template?
In our case, we want to pick a HTML.
And there you go.
We get a nice little zipped folder and now we have this downloaded.
So let's open this up.
And oh, boy, that's a whole lot of files and folders.
So what should we grab from here?
Well, there's a few things.
First, this is the sample page.
We actually don't need this, so let's just move it to trash.
Next, we have assets.
These are, well, different assets for our page to work, such as the astronaut page.
So we'll keep that around.
And then we have our HTML pages.
Which we definitely need.
And then it looks like we have some JavaScript files and CSS files.
Now there's a dot GZ here, which is what we call a compressed file, a GZ compressed file.
So this is just a way for the server to send a file or the JavaScript file, which you can see is 138
kilobytes, but in a compressed form, so 44 kilobytes.
So this way we're sending less data to the front end.
And then we also have something like MAP, which actually helps us during debugging.
But in our case, we don't need to worry about this for now.
So let's just remove all the GZIP and map files.
So we'll move those to trash so that we only have one CSS file and one JavaScript file, and then all
the other ones are HTML files for our different pages.
Now what we're going to do is we're going to copy this and move it to our project folder.
Remember this folder over here?
So ideally, we move the HTML files into the templates and the static files, that is the CSS and JavaScript
files and maybe the assets in here.
So that is the images in here.
So let's do that.
I have my web server here.
I'm going to first just copy and paste what we just copied.
And let's move all our HTML files.
Into our templates.
And you know what, let's remove our existing templates as well because we don't need them anymore.
We have the pretty HTML file now.
And then just have all of these.
We have a new index.html that is going to be a lot prettier than our old websites, so we want to use
that.
So let's move all that into templates.
And then let's do the JS and CSS file as well as the assets folder into the static.
Awesome.
So now that we have that set up, let's go back to our project and look at that.
We have a lot more HTML that we haven't written, but luckily it's already created for us.
Now the last bit of setup is that because we moved our files around, we need to adjust the links between
the HTML, CSS, JavaScript and all the asset files.
So if we scroll if we go to index HTML.
We see that we're looking for the Vatican and assets fab icon.
But because this is in static folder, we have to add static in here.
So let's find where else we're using the assets in here.
All right.
So it looks like let's make this a little bit bigger.
So it looks like here for our background image.
We're once again looking for the space image, but that's as we know in the static folder.
And let's see where else we have we have over here as well.
Let's do static.
Let's keep going.
Static.
All right.
Everything is all good.
Now we have the static folder.
Oh, and we have to make sure we add a slash in front of the dot.
Dot just means current directory and then look in the static folder.
So let's go back, make sure we do that for everything.
There we go.
And there we go.
Now let's save this.
And I don't think we're completely done yet, but for now, let's go into our server.
Dot pie.
And for our home route, let's remove what we've had before.
And let's just call it my home function.
That takes no parameters, and instead it's just going to return for us.
Our index.
HTML with no past in parameters.
So let's save.
Go back to our page.
Or my website.
And see what we get when we refresh.
All right.
That's a pretty, pretty ugly website, but it looks like at least we're displaying something.
But right away, we notice that it looks like there's no CSS being applied.
It looks like we have some HTML, but the links aren't working either.
So once again, this is because we have to update the links between the files.
So what we'll do is actually go back to index dot HTML and in the head tag we see that we have our stylesheet,
our CSS file.
But again, we have to update this to have it in the static.
Folder.
As well as the JavaScript file, which if we scroll all the way to the bottom, we have the JS file
here.
Which once again will be in the static folder.
All right, let's save.
And go back and see if that makes things better.
Hey, look at that.
That's pretty cool.
Mind you, this looks a little big because I increase the size of my website by doing command plus and
minus just so we can see better.
But that's pretty awesome.
Now, if I click on let's say works.
Hmm, I get workstation.
HTML does not exist.
So how can we fix that?
We already know how to do that, right?
All we need to do is to update these different routes so that it points to the appropriate template.
Now, in the next video, I'll show you how to do that, but I want you to attempt to do this yourself,
because we've learned this by now.
So try to make the website work exactly like we had it.
Over here on our mash up templates and I'll see you in the next video.