Flask and Templates Exercises

These exercises take you from a fresh empty folder to a Flask app that passes data from Python to an HTML template. Do them from scratch each time — no copying from previous projects.

Exercise 1 — Set Up From Scratch

Create a brand new project folder called flask-exercises. Inside it:

Open the folder in VSCode
Create a virtual environment using Ctrl + Shift + P → Create Environment → Venv
Wait for (.venv) to appear in the terminal
Install Flask: pip install flask
Create the templates/ folder
Create app.py in the root

When you are done, your structure should look like this:

flask-exercises/
├── .venv/
├── templates/
└── app.py

Exercise 2 — Two Routes

In app.py, create a Flask app with two routes:

/ — serves a page called home.html
/about — serves a page called about.html

In templates/, create both HTML files. Each one should have the full skeleton, a title, a heading, and a short paragraph. Put something different on each.

Run the app and confirm you can visit both pages:

http://127.0.0.1:5000/
http://127.0.0.1:5000/about

On each page, add a link that goes to the other one. You should be able to navigate between them without touching the URL bar.

Exercise 3 — Pass a List to a Template

In app.py, create a list of your five favourite things — any topic. For example:

favourites = ["Python", "Football", "Music", "Reading", "Cooking"]

Pass it to home.html via render_template. In the template, use a Jinja2 {% for %} loop to display each item as a list item inside a <ul>.

The page should show a bullet list of all five items. Add a sixth item to the Python list, save, and refresh — it should appear automatically.

Exercise 4 — Pass a List of Dictionaries

Replace the simple list in app.py with a list of dictionaries. Each dictionary should have three keys: title, year, and watched (True or False):

movies = [
    {"title": "Inception",      "year": 2010, "watched": True},
    {"title": "Interstellar",   "year": 2014, "watched": True},
    {"title": "Dune",           "year": 2021, "watched": False},
    {"title": "The Matrix",     "year": 1999, "watched": True},
    {"title": "Tenet",          "year": 2020, "watched": False},
]

Pass this to the template and display it in a proper HTML table with columns: Title, Year, Watched.

For the Watched column, use a Jinja2 {% if %} to show Yes or No instead of True or False.

Exercise 5 — A Jinja2 If Statement

On the same page from Exercise 4, add a heading above the table that shows a different message depending on how many movies are in the list.

You cannot do this with HTML alone — you need Jinja2. Pass the list length from Flask:

return render_template('home.html', movies=movies, count=len(movies))

Then in the template, use {% if count > 3 %} to show one message and {% else %} to show another. Something like:

More than 3 movies: "You have quite a collection — {{ count }} movies listed."
3 or fewer: "Just getting started — {{ count }} movies so far."

← CSS Exercises Next: The Patient Form →