Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Bringing in the real layout
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now, let's just take stock of where we're going, what we're trying to build. Remember, this is our application we're building during this course,
0:08
and here we have it running locally in a finished version. What you'll have at the end. But we're not there yet,
0:13
are we? So this looks a lot like pypi.org. See,it's got some data in the database. We can go and see details about these packages.
0:22
We can log in, we can log out. We can come over here and say /about to go the about page. So what I'd like to do is to bring in some of this design.
0:32
This is not a web design course. This is just to teach you how to take the concepts of web development,
0:38
including design and harness them with FastAPI and use that very powerful framework
0:44
as the foundation instead of something like Flask or Django or Pyramid. So what I wanna do is, I want to copy this overall shared layout feel
0:53
into our web application. Now, in our static folder we have site.css, which has the one silly thing there.
1:00
We're gonna remove that and we're going to add in a completely different set of files here. So over here in our static,
1:09
it's empty. But what we want to do is paste styles from somewhere else. I've got those copied from something I've already written.
1:18
And over here, you could now see we've got a whole bunch of stuff. Look, we've got, say, our site CSS, which has a bunch of web design,
1:26
our navigational design and so on. And we've got external CSS files like Bootstrap and jQuery and so on.
1:37
jQuery is just JavaScript. We've also got some images. So that's just gonna be the general layout. You could go and study that if you want to mimic it.
1:46
But the point is to show just how to use this and build a really cool application, right? So that is step one.
1:53
The second step, in order to use that is to put our, go into this shared lay out here. Right now it's incredibly simple with just one CSS file that we
2:03
actually deleted, but there's really not a lot going on here, so I'm gonna copy over the proper one,
2:09
and let's take a look at what we have now over here. So we've got more style sheets, we've got Bootstrap, we've got the site, we've got the navigation.
2:18
We have a few more slots to fill in if we want to add additional CSS, we may end up doing that. Over here, we've got a toolbar,
2:27
a navigation bar that comes from bootstrap with things that look like the main PyPI site like "Donate" and "Help" and "login" and "register".
2:34
Here's our main content as we talked about and then it's got a footer and some Javascript to make things go.
2:40
Other than that, we've only dropped in the CSS. and the images, which change nothing. There might be something that's dependent upon what we pass over,
2:49
but I don't think so. Let's give it a shot. See if this will work. Look at that! Now, that might not seem that impressive,
2:58
right? But here's our content and here we go to our about. Here's our about, there's our home page. Notice we've got our common look and feel.
3:11
Just like over here, you can see we've got our common look and feel, our navigation. Down the bottom We've got our footer.
3:15
So just like that our site is ready to go and there's really nothing fancy besides I brought in just some CSS and some basic HTML and our goal is
3:25
going to be to start writing the code that fills out these pieces as our login. This one's empty for the moment.
3:31
Remember we didn't turn, do anything with what we're returning from there. We've got our register. But you see,
3:36
those were actually, those links are starting to work. So very, very cool. We've got our overall look and feel, in the real
3:43
web design, put together. Let's see how we did. Here's the real pypi.org. Roll that up, now we can scroll it
3:51
up. It's just stuck there but look, pretty, pretty good, pretty good I think in terms of, you know,
3:56
the navigation and such. So we got a ways to go, but we're making really good progress here.