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