Creating Templates

00:00 Templates allow us to separate the presentation layer. That is the HTML/CSS that the user sees from the application’s logic. This separation is best practice for web development, making your code cleaner, easier to maintain, and more flexible.

00:16 Flask uses the Jinja2 templating engine. Jinja2 is a powerful templating language that lets you embed dynamic content into your HTML files. This means you can generate HTML pages with data that changes depending on the context, such as user information or data from a database.

00:35 If you want to learn more about Jinja, be sure to check out our dedicated Jinja templating tutorial. I have added a link to it in the last section titled Additional Resources.

00:46 First, we create a base template, which acts as a foundation for other templates. This avoids repeating common HTML elements on every page. Let’s go back to our IDE and create the base template.

01:00 Let’s create a new folder called templates inside the board folder.

01:07 Inside templates, create a new file called base.html, a normal HTML page. Now in this file, you write the code for your base template.

01:19 Instead of typing out the entire code, you can easily grab it from the associated tutorial. Just head over to the supporting materials dropdown under recommended tutorial where you’ll find everything you need.

01:31 This way, you can focus on understanding the concepts while having the code ready to use.

01:37 The main structure of base.html is similar to a normal HTML page. You start by declaring the DOCTYPE, wrapping everything in HTML tags and setting the lang attribute.

01:50 Then you go on to add head and body with some of the nested elements. Then you set the title of your project to Message Board. This empty title block gives you the opportunity to extend the title with the child template.

02:04 The block title, block header, and block content are special Jinja2 template tags. They define blocks that child templates can override, allowing you to customize specific sections of the base template.

02:19 Now let’s go ahead and add the child templates.

02:24 The child templates will inherit the structure from base .html and fill in the content specific to each page. First, create a new folder called pages inside the templates folder.

02:37 Now create a new file called home.html in the pages folder.

02:44 The code for homepage goes here. The extends base.html tag tells Jinja2 that this template inherits from base.html. The block title and block content tags override the corresponding blocks in the base template, allowing you to define the specific title and content for this page.

03:04 In home.html, we use url_for(), a Flask function that dynamically generates the URL for about page. This works because in the pages blueprint, we define a route for about using the bp.route() decorator.

03:20 Flask associates the about() function with this route and the url_for() function uses this association to generate the correct URL.

03:30 However, you’ll notice that clicking this link won’t redirect you to a new page because you have not created the about.html template yet. So let’s go ahead and create your about.html page.

03:44 Just like in home.html, you add the page’s title inside the header block and wrap it within title. Jinja will understand this structure and render the page’s title in the header and title blocks.

03:57 In this lesson, you learned how to create a reusable base template and build child templates using Jinja2, enabling dynamic content for pages like home and about.

04:07 You also saw how Flask’s url_for() function ties templates to routes defined in your blueprints. In the next lesson, you’ll explore how these child templates are rendered and displayed dynamically, allowing users to navigate between pages seamlessly.