🐍 Lesson 32: Flask Templates (Jinja2) – Build Real HTML Pages

Welcome to Lesson 32! Today we’ll learn how to create real HTML pages using Flask Templates with the Jinja2 template engine. This is an important step in becoming a full-stack Python developer, allowing you to render dynamic content and create beautiful web pages.

---

💡 Key Benefits of Learning Flask Templates

• Build dynamic, data-driven websites with Python
• Mix frontend (HTML) and backend (Python) seamlessly
• Re-use layouts for consistent UI across pages
• Create full-fledged web applications with ease
• Master the most important part of web development with Flask

---

🌐 What Are Flask Templates?

Templates in Flask allow you to:

• Build full HTML pages
• Insert dynamic data into pages
• Create reusable layouts (header, footer, navbar)
• Control logic directly inside HTML

📂 2. Project Structure

project/
│── app.py
│── templates/
    │── home.html
    │── about.html

📄 3. Create Your First Template

Create a file: templates/home.html

    


    
Welcome to Flask Templates!
    
This page is rendered using HTML + Jinja2.

📦 4. Render This Template in Flask

In app.py:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")

if __name__ == "__main__":
    app.run(debug=True)

📌 5. Passing Data to Templates

Add this route:

@app.route("/about")
def about():
    name = "Python Learner"
    return render_template("about.html", username=name)

Create templates/about.html:

Hello, {{ username }}!
This is the About Page.

🧩 6. Using Jinja2 Logic in Templates

➡ If–Else Example:

{% if username %}
  
User: {{ username }}
{% else %}
  
No user found.
{% endif %}

➡ Loop Example:

{% for item in ['Python', 'Flask', 'HTML'] %}
  
{{ item }}
{% endfor %}

🧠 Why Templates Are Important

• Used in every Flask website
• Allows mixing backend logic with beautiful frontend UI
• Essential for dashboards, admin panels, and full websites
• Reusable templates save time

❓ Frequently Asked Questions (FAQ)

1. What are Flask templates used for?

Flask templates allow developers to build dynamic, data-driven web pages. With Flask and Jinja2, you can pass variables from your Python backend into HTML files and generate customized content for each user.

2. Do I need to know HTML to use Flask templates?

While Flask templates are built with HTML, you don't need advanced HTML skills to get started. If you're familiar with basic HTML, you'll be able to use Flask templates and Jinja2 efficiently.

3. How do Flask templates help in web development?

Flask templates make it easy to combine Python logic with frontend design. They help create dynamic content such as user profiles, dashboards, or articles, while keeping your HTML clean and modular.

4. Can I use other template engines with Flask?

Flask uses Jinja2 by default, but you can use other template engines like Mako or Chameleon if you prefer. However, Jinja2 is the most commonly used template engine in the Flask ecosystem.

5. How can I make my templates more reusable?

Flask allows you to create "base templates" with common elements like headers, footers, and navigation bars. You can then extend these templates for specific pages, reducing redundancy and making your code more maintainable.

❓ Common Misconceptions About Flask Templates

• “Flask templates are just static HTML.” – Flask templates are dynamic and support Python logic, making it easy to build dynamic, data-driven pages.
• “You can’t use loops or conditionals in Flask templates.” – Jinja2, Flask's template engine, supports powerful control structures like loops, conditionals, and more within HTML.
• “Templates are only for small projects.” – While Flask is a lightweight framework, you can build full-fledged, production-ready web applications using Flask templates.

🧪 Practice

1. Create a template called profile.html that displays a name, job, and hobby passed from Flask.
2. Add a loop in HTML that displays 5 favorite movies.
3. Use if–else to show a message like “Logged In” or “Guest”.
4. Create a navbar template and include it in both pages.

➡ Next Lesson

Go to Lesson 33 →