Why template engines matter in Flask - See It in Action

Why template engines matter

📖 Scenario: You are building a simple web page that shows a list of your favorite fruits. Instead of writing HTML with data mixed in, you will use Flask's template engine to separate the data from the page design.

🎯 Goal: Create a Flask app that uses a template engine to display a list of fruits dynamically on a web page.

📋 What You'll Learn

Create a Python list called fruits with the exact values: 'Apple', 'Banana', 'Cherry'

Create a Flask app with a route / that sends the fruits list to a template

Create an HTML template file called fruits.html that uses Jinja2 syntax to loop over fruits and display each fruit in an unordered list

Use the template engine to separate HTML structure from Python data

💡 Why This Matters

🌍 Real World

Web developers use template engines to keep their HTML pages clean and separate from the data or logic that fills them. This makes websites easier to build and maintain.

💼 Career

Knowing how to use Flask and its template engine is a key skill for backend web developers working with Python to create dynamic websites.

1

Create the data list

Create a Python list called fruits with these exact values: 'Apple', 'Banana', and 'Cherry'.

Flask

# Create the list of fruits
# Your code here

Need a hint?

Use square brackets to create a list and separate items with commas.

2

Set up Flask app and route

Import Flask and create an app. Then create a route for / that returns rendering of the template fruits.html with the fruits list passed as a variable.

Flask

fruits = ['Apple', 'Banana', 'Cherry']

# Import Flask and create app
# Your code here

Need a hint?

Use render_template to send data to the HTML file.

3

Create the HTML template with Jinja2 loop

Create a file named fruits.html with an unordered list. Use Jinja2 syntax to loop over the fruits variable and display each fruit inside a <li> tag.

Flask

{# Create fruits.html template with a loop to list fruits #}

Need a hint?

Use {% for fruit in fruits %} to start the loop and {% endfor %} to end it. Use {{ fruit }} to show each fruit.

4

Run the Flask app

Add the code to run the Flask app only if the file is run directly by Python. Use app.run(debug=True) inside the if __name__ == '__main__': block.

Flask

from flask import Flask, render_template

fruits = ['Apple', 'Banana', 'Cherry']

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('fruits.html', fruits=fruits)

# Add code to run the app below
# Your code here

Need a hint?

This code makes sure the app runs only when you start this file directly.