All right.
Where are you able to get that?
If not, don't worry.
Let's go over what we need to do to get everything on our profile working.
So we obviously have an about HTML page, so that can just stay the same as it is now.
We can call it about and if we copy and paste here, do another one, let's say, what else do we have?
We have work html so let's do work.
HTML which will be work html and let's just check that this works.
I'm going to remove the old route just so we have the home about and work html.
If I go back.
And let's go to home.
Oh, looks like we have a bit of an error.
And I did not change the function over here.
You see that I have both about.
So let's just call this work if I go back and refresh.
All right, let's go to works.
Well, it's works.
TML Why isn't that working?
That is because it should be works.
HTML.
Silly me.
All right, let's go back.
Let's refresh.
Works.
All right.
Works is working.
But once again, the CSS is not being applied.
If I go back and let's go to about me about me is working as well.
But the CSIS isn't being applied and we know why that is.
Once again, if we go to works.
We have to update this to include the static folder.
Awesome.
And then we update the CSS page as well.
As well as the JavaScript page.
So this is a lot of repetition, but I'm just showing you so you understand what the thought process
is and why we need to do this again.
We'll just fix these as well.
And this one.
I feel like I should have a song in the background as I do this, so you don't get bored of me just
doing this over and over.
But repetition is good, right?
All right, last one.
The.
JavaScript file.
Let's save.
Go back to our server.
Let's refresh.
All right, let's go to home.
Oh, looks like index.html is not working, so we got to fix that as well.
We have the root directory that's working if I click on works.
Hmm.
Looks like the CSS didn't work less about let's see about me.
About me is working.
So we missed something and works if we go back to.
Oh, and that's because we have a work and works HTML.
So we have to make sure that we incorporate the works HTML instead of the work one.
I'm not sure what this page does, but I'm sure it's part of part of this.
So again going into our works html.
Doing the same thing we've been doing, adding the static.
Like so.
And all the way at the bottom for the JavaScript file as well.
Let's go back.
Go to works and.
Hurray!
Look at that.
All our works are being displayed.
But like some of the images are not displaying.
Now.
Can you guess why that is?
Well, if we go back to.
Our work's HTML.
And we look for images.
We see that here, we have to add the static as well.
So again, I'll add those to the images.
And just to make this faster, I'll just copy this and do command F or control F to search for all instances
of images and make sure that we add the assets in here.
An easy way of doing this, and this is what an ID can help you with.
Or a text editor like Sublime text is.
I can select the entire thing like this and do command control g.
And this actually selects all the instances and I have now multiple cursors.
Now what I can do now is just.
Add the static on all the instances, as you can see at the bottom and the top here as well, so that
I don't have to repeat myself.
Now let's go back.
Refresh and look at that.
We have our projects display.
That's really, really cool.
And just like that, we have our templates now.
We still have the components that we need to fix and the contact.
Now the components we actually don't need, because if you go to the preview here, the components is
just an HTML template that you can just copy and paste based on what components you need.
But we don't actually need that on our real portfolio.
The only other one that we need is the contact page, which is really, really important because we're
going to use that for our Python server.
So let's go back here.
Let's remove the components html.
Or for now we can just keep it there.
But in the index html file.
We can go all the way down.
And in the navigation bar section you see over here how we have the components dot html.
We can just remove that.
Just like that.
So we're not using it.
Now, one thing you may have seen me do is copy and paste code.
So that now we would have to do.
A another route that says contact and then once again do contact.
But this is us repeating code based on what we've learned.
Can we improve this so this becomes more dynamic so that maybe when we add a new HTML file to this profile,
we don't have to constantly just copy and paste the same code over and over.
Try that.
And in the next video, I'll show you how we can do that.