# ![](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
<!--- Provide a breakdown of what will happen in this lesson. --->

| 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.
