# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Templates ## Overview This lesson teaches how to use templates in Flask. It walks through what templates are, then changes the students' existing apps to pass variables into their `index.html`. It ends with a You Do, prompting students to combine variables with templates. --- ## Important Notes and Prerequisites Students are expected to have Flask 0.12 or later installed. --- ## Learning Objectives In this lesson, students will: - Create a template HTML document. - Pass variables to a template HTML document via a Flask app. --- ## Duration 30 minutes --- ## Suggested Agenda | Time | Activity | Purpose | | --- | --- | --- | | 0:00 - 0:03 | [Welcome](#activity-welcome-3-min) | Introduce the lesson’s objectives and agenda. | | 0:05 - 0:10 | [Jinja Templates](#activity-jinja-templates-5-min) | High-level discussion on templates. | | 0:10 - 0:20 | [Implementing Templates](#activity-implementing-templates-10-min) | Extending the `my_website.py` Flask app to pass variables into the template. | | 0:20 - 0:28 | [File Variables and Templates](#activity-file-variables-and-templates-8-min) | Challenge to pull variables from a file into the template. | | 0:28 - 0:30 | [Summary](#activity-summary-2-min) | Wrap up the learning and share next steps. | --- ## Differentiation and Extensions - For more advanced students: Try adding `for` loop logic into template brackets. - For more advanced students: Ask them to stylize their `html` files. - For struggling students: Review variable assignment and Flask first principles. --- --- ## Lesson Procedure --- ### Activity: Welcome (3 min) > Introduce the lesson’s objectives and agenda. #### Teaching Tips: - This lesson builds on our `my_website` app from earlier. - This is a great moment to answer any outstanding questions about routes/variables. - Students will need to firmly understand these concepts in order to apply templates well. --- ### Activity: Jinja Templates (5 min) > High-level discussion on templates. > **Teaching Tips:** > - It's not absolutely crucial that students understand how Jinja2 works. > - It is necessary that they understand the "why" of templates. --- ### Activity: Implementing Templates (10 min) > Extending the `my_website.py` Flask app to pass variables into the template. > **Teaching Tip:** > - There should be sufficient time in this section to answer/clear up outstanding questions regarding the `Hello World` app. --- ### Activity: File Variables and Templates (8 min) > Challenge to pull variables from a file into the template. > **Teaching Tip:** > - After giving students some time, go over the answer with them. --- ### Activity: Summary (2 min) > Wrap up the learning and share next steps.