Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Concept: Shared layout

Login or purchase this course to watch this video and the rest of the course contents.
0:00 One really important thing you want to keep in mind when building web applications is how
0:05 are you gonna have some shared look and feel, some common look for your application.
0:10 Let's take the Talk Python To Me podcast website
0:13 for example. Here's the home page you can see we have the navigation across the
0:16 top. We have this Linode sponsorship bar and some general styles.
0:20 There's, in fact, a bunch of other stuff going on,
0:23 like CSS, like JavaScript like analytics and whatnot that you don't even see here as
0:28 well. But obviously the calm look and feel,
0:31 it's the same, right? Over here,
0:33 go to the episode page, similar navigation along the top,
0:37 similar style sheets and whatnot. Going to a particular episode,
0:41 Surprise! Same banner, same navigation,
0:44 same style sheets and so on,
0:46 maybe some extra ones for this particular page.
0:48 But in general, it's the same.
0:51 So having this one look and feel for your site is really important,
0:55 and what we want to do is we wanna make sure that we write a single
0:59 HTML page, put that code into one place and use it throughout the entire site
1:04 So when we make a change, let's say we want to change that banner or
1:07 we want to add a new navigation element,
1:09 we change it in one place and everything changes.
1:13 So there's all sorts of benefits to having these layouts that are shared.
1:16 It's not just the look and feel.
1:18 That's the obvious thing. But you have much more consistent things,
1:22 like a consistent title. Or if you've got meta description or meta other info in
1:28 the head of your document, that will all be the same and shared,
1:31 and if we want to make a change.
1:32 You do it in one place.
1:34 You have consistent CSS and JavaScript files not just having the same ones,
1:38 but in exactly the same order all the time.
1:42 Consistent analytics. So if you want to do something like have Google Analytics that tracks
1:46 people on every page, I don't do that in my sites with Google Analytics.
1:50 But if you want to have something like that,
1:52 you could add that, say
1:53 at the bottom of your shared layout and every single page is always gonna have the same
1:57 analytics. This one's slightly less obvious,
2:01 but it's really important. You have a
2:02 structured way for every other page to bring in it's extra CSS.
2:07 So imagine that that episode page had an extra CSS file, an extra JavaScript file
2:12 I wanted to bring in. You could have certain little parts in that shared layout
2:15 That's here's where that page can bring in its extra files.
2:19 You can do that in a really consistent and structured way,
2:21 so these are super useful and we'll see how to add them now.