Welcome back.
Let's make this a little bit more dynamic.
We have our home route, but for all the other HTML pages, it would be nice if this was generated dynamically
so that we don't have to copy and paste code.
So let's delete all of these and instead use this little syntax that we learned about where we can dynamically
accept different URL parameters.
In this case, we can just call it page name, and this page name should be a string, right?
So now we can use the string type to say, I want the page name.
So this is going to be a HTML page and we want to render in the template.
The data that was entered in the URL.
So we can actually give it the page name here as the input.
And print out the page name here.
Let's see if this works.
I'm going to save this.
Go back to our home page.
And it works.
What if I do works?
Look at that.
If I go to about me.
About me works.
Contact.
All right.
Contact is working.
But the CSS isn't being applied, so we have to update that and we still see the components.
All right.
So there's a few things that we need to fix, but everything is working dynamically, which is great.
And you see that even index.html that we had issues with before is now working, which is great.
So let's fix a few things.
We've now made our code super simple and easy to understand.
But there's a few bugs that we need to fix in our code.
First is to remove the components.
Now, the reason this is happening is that each page, if we scroll up to the top.
So let's go to the about page has.
The components link.
So from each page we just have to remove the components.
So let's go to contact.
Remove the components here.
Go to index.
We've already removed the components for that one.
If I go to work.
Work is a little bit different.
We'll get back to that in a second.
If we go to works and again at the top and the navigation, the components we can just remove just like
that.
We also saw that the context page doesn't have CSS added to it.
So again, we go back.
And we add the static.
Folder here.
Same with the icon.
Right over here.
And then the JavaScript file at the bottom.
If we save.
Go back.
Let's refresh.
And go to home.
If we go to works.
That works about me.
That works.
Contact.
Look at that.
How pretty is that?
All right.
Now, a few things that I want to fix here.
One is that we see that the numbers don't match.
Over here, we want them to ideally match.
Right.
So we have this working.
But then about me and contact.
That's kind of weird.
Let's see why that is.
If we go back.
We go to contact?
We see that in the navigation we have one, two, three, four, which looks great.
But then at the bottom we see that the numbers contact me are a little bit off.
So let's just do 044 contact me.
If we go to about making sure that the about page or about me is.
Zero three.
So let's do that.
And now, if I save and refresh, we have Contact Me About Me Works and home.
All right, two last things, and then we're going to get back to Python, I promise.
One.
I want to change this text so that it says my name and maybe I'm a python developer.
So all we have to do is once again go to index HTML and look for.
This text, add your site or app content here so we can see here it says, Hello, I'm James Dean,
French designer.
So let's just say I'm Andre Nagoya.
And let's say Python, let's say expert sounds cooler working as a freelancer.
Let's do an instructor because I am an instructor after all.
So that if I save.
And refresh.
How awesome is that?
Super, super simple.
That looks pretty neat.
All right.
The last thing is the works part.
If you look at my works and I click on Discover.
All right, so here you can add your own projects that you want.
If I go to zero six, I guess the links here aren't working since we only have one work.
But let's say you wanted to add a different project.
All we have to do is simply say work to HTML and link in zero zero to here with work too.
Let me show you how that's done.
So let's go to work.
HTML.
If we do control F and do 002, we see that these are the links.
Look at that.
002003.
So all we have to do is perhaps change the link here to work to HTML so that it links to work too.
Now that's something that you can do on your own.
Again, we don't want to focus too much on HTML and CSS because it's outside the scope of this course.
But as you can see, we have a pretty neat website pretty fast.
It only took us a couple of minutes and you now have a portfolio Web page.
But there's one big piece missing and one thing that Python can really help us with that is this contact
form.
It wouldn't be a real portfolio website unless people can contact you, right?
Maybe employers or people that need work down can actually send you a message.
So over the next couple of videos, we're actually going to explore this where we're able to send information
to our server and the back end and actually capture it and save it and store it somewhere.
I'll see you in the next one.
Bye bye.