DEV Community

Gopal Ghate
Gopal Ghate

Posted on

🎨 Django Templates & Static Files – Building Dynamic HTML

#django #webdev #programming #html

In the last article, we learned how to handle views and return different types of responses. Now, let’s make those responses beautiful and dynamic using Django Templates and Static Files.

Templates allow you to mix HTML with Python-like logic, and static files (CSS, JS, images) make your pages come alive.

🧩 What Are Django Templates?

Django uses the Django Template Language (DTL) to help you embed dynamic content inside HTML.
Example (blog/templates/blog/home.html):

<!DOCTYPE html>
<html>
    <head>
        <title>{{ title }}</title>
    </head>
    <body>
        <h1>Welcome, {{ user }}</h1>
        <p>{{ message }}</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

You can pass variables from your view:

def home(request):
    context = {
    'title': 'My Blog',
    'user': 'Gopal',
    'message': 'Learning Django Templates is fun!'
    }
    return render(request, 'blog/home.html', context)
Enter fullscreen mode Exit fullscreen mode

Result -> Welcome, Gopal

🧠 Template Tags and Filters

You can use logic in templates using special tags.
Example:

{% if user %}
    <h2>Hello, {{ user }}!</h2>
{% else %}
    <h2>Welcome, Guest!</h2>
{% endif %}
Enter fullscreen mode Exit fullscreen mode

Loops:

<ul>
    {% for post in posts %}
        <li>{{ post.title }}</li>
    {% empty %}
    <li>No posts available.</li>
    {% endfor %}
</ul>
Enter fullscreen mode Exit fullscreen mode

Filters:

<p>{{ post.content|truncatewords:10 }}</p>
<p>{{ post.published_at|date:"F j, Y" }}</p>
Enter fullscreen mode Exit fullscreen mode

Filters format or modify data inside templates.

🧱 Template Inheritance (DRY Principle)

Avoid repeating code like headers and footers using template inheritance.

base.html

<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}My Site{% endblock %}</title>
    </head>
    <body>
        <header><h1>My Blog</h1></header>
        <main>
            {% block content %}{% endblock %}
        </main>
        <footer>© 2025 My Blog</footer>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

home.html

{% extends 'blog/base.html' %}


{% block title %}Home Page{% endblock %}
{% block content %}
    <h2>Welcome to my blog!</h2>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

This structure keeps your HTML modular and maintainable.

🖼️ Static Files (CSS, JS, Images)

Static files are assets that don't change dynamically.
Folder structure:

blog/
├── static/
│    └── blog/
│    ├── css/
│    │    └── style.css
│    ├── js/
│    │    └── script.js
│    └── images/
│         └── logo.png
Enter fullscreen mode Exit fullscreen mode

settings.py Configuration

STATIC_URL = '/static/'
Enter fullscreen mode Exit fullscreen mode

During development, Django automatically serves static files if DEBUG=True.

Loading Static Files

In your templates:

{% load static %}
<link rel="stylesheet" href="{% static 'blog/css/style.css' %}">
<img src="{% static 'blog/images/logo.png' %}" alt="Logo">
Enter fullscreen mode Exit fullscreen mode

Example style.css

body {
    background-color: #fafafa;
    font-family: Arial, sans-serif;
    margin: 40px;
}
Enter fullscreen mode Exit fullscreen mode

⚡ Best Practices

  • Always use load static at the top of the templates.
  • Keep static files organized per app (app_name/static/app_name/).
  • Use template inheritance for reusable layouts.
  • Avoid putting business logic inside templates.

🏆 Summary

  • Templates render dynamic HTML using context variables.

  • Template tags and filters add logic and formatting.

  • Template inheritance keeps layouts DRY.

  • Static files add design, interactivity, and branding.

Top comments (0)