Flask Templates: Make Your App Look Good

Flask Templates: Make Your App Look Good

From Plain Text to Beautiful Pages with Jinja2

Imagine building a Flask app that works perfectly but looks like a 1990s webpage—just raw text on a white background. Not exactly impressive, right?

The good news? Flask’s Jinja2 templating engine lets you transform dull, static text into dynamic, well-structured, and visually appealing web pages. Whether you're building a personal blog, a portfolio, or a business app, templates help you separate logic from design and reuse components efficiently.

In this guide, you’ll learn:

✅ Why templates matter (and how they save time)
✅ Basic Jinja2 syntax to get started
✅ How to structure templates for reusability
✅ Adding CSS to make your app look professional

By the end, you’ll be ready to create your first templated Flask app—and maybe even share a screenshot with us!

Why Use Flask Templates?

If you’ve been rendering plain strings in Flask like this: 

@app.route("/")
def home():
    return "<h1>Welcome to my app!</h1>"

…you’re missing out. Here’s why templates are better:

✔ Separation of Concerns – Keep Python code (logic) and HTML (design) in separate files.
✔ Reusable Components – Avoid repeating headers, footers, and navigation bars.
✔ Dynamic Content – Insert variables, loops, and conditions directly into HTML.
✔ Easy Styling – Integrate CSS frameworks (Bootstrap, Tailwind) effortlessly.

Without templates, maintaining a large app becomes messy. With them, you stay organized.

Getting Started with Jinja2

Jinja2 is Flask’s built-in templating engine. It lets you:

  • Insert Python-like expressions ({{ variable }})
  • Use loops ({% for %}) and conditionals ({% if %})
  • Extend or include other templates

Step 1: Set Up a Templates Folder

Flask looks for templates in a /templates folder. Create this structure: 

my_flask_app/  
├── app.py  
├── templates/  
│   └── index.html

Step 2: Your First Template

Inside index.html, write standard HTML with Jinja2 placeholders: 

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <h1>Hello, {{ username }}!</h1>
    {% if is_logged_in %}
        <p>Welcome back!</p>
    {% else %}
        <p>Please log in.</p>
    {% endif %}
</body>
</html>

Step 3: Render the Template in Flask

Modify app.py to pass data to the template: 

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template(
        "index.html",
        title="My Flask App",
        username="Alice",
        is_logged_in=True
    )

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

Now, when you visit http://localhost:5000, you’ll see a dynamic page instead of plain text!

Reusing Code with Template Inheritance

Copy-pasting the same HTML (like navigation bars) across pages is tedious. Instead, use template inheritance.

1. Create a Base Template (base.html)

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
    <div class="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

2. Extend the Base Template (index.html)

{% extends "base.html" %}

{% block title %}Home Page{% endblock %}

{% block content %}
    <h1>Welcome!</h1>
    <p>This is the home page.</p>
{% endblock %}

Now, all pages using {% extends "base.html" %} will share the same header, footer, and styles.

Adding CSS for a Professional Look

Plain HTML is functional, but CSS makes it visually appealing.

Option 1: Static CSS File

  1. Create a /static folder and add style.css: 
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f9;
}

nav {
    background: #333;
    padding: 10px;
}

nav a {
    color: white;
    margin-right: 15px;
    text-decoration: none;
}
  1. Link it in base.html: 
<link rel="stylesheet" href="/static/style.css">

Option 2: Use a CSS Framework (Bootstrap)

Just add Bootstrap’s CDN in base.html: 

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

Now you can use Bootstrap classes like container, btn, and navbar.

Your Next Steps

You’ve just learned how to:

  1. Structure Flask apps with templates
  2. Use Jinja2 for dynamic content
  3. Reuse code with inheritance
  4. Style pages with CSS

Now it’s your turn!

🚀 Challenge: Create a simple Flask app with:

  • A base template
  • Two pages (Home & About)
  • Basic CSS styling

Then, share a screenshot of your templated app—we’d love to see what you build!

Got stuck? Ask in the comments, and let’s make your Flask app look amazing! 🎨

The Magic of Flask Routes