django templates
No account is required. Learn the material, try the examples, and mark it complete when you are ready to move on. Sign in with email only if you want to save progress across devices.
Tutorial 07 - Django Templates
Why this matters
Templates are the bridge between Django/Python data and HTML.
The basic idea is:
Python data
↓
View
↓
Template
↓
HTML
↓
Browser1. Static template
A template may contain ordinary HTML:
<h1>Welcome</h1>
<p>We help entrepreneurs.</p>The view can render it:
return render(
request,
"main/home.html",
)2. Variables
View:
name = "CookieSensei"
return render(
request,
"main/home.html",
{"name": name},
)Template:
<h1>Welcome to {{ name }}</h1>The {{ }} syntax outputs a value.
3. Multiple values
context = {
"name": "CookieSensei",
"city": "Bengaluru",
}Template:
<h1>{{ name }}</h1>
<p>{{ city }}</p>4. Loops
{% for product in products %}
<article>
<h2>{{ product.name }}</h2>
<p>₹{{ product.price }}</p>
</article>
{% endfor %}The template syntax differs from Python, but the concept is familiar.
5. Conditions
{% if product.available %}
<p>Available</p>
{% else %}
<p>Unavailable</p>
{% endif %}6. Filters
You may see:
{{ name|upper }}or:
{{ description|truncatewords:20 }}Filters transform displayed values.
You do not need to memorize them.
7. Template inheritance
Suppose every page has the same navigation and footer.
Instead of copying them into every template, create:
base.htmlExample:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about/">About</a>
</nav>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>My Business</p>
</footer>
</body>
</html>A child template:
{% extends "base.html" %}
{% block title %}About{% endblock %}
{% block content %}
<h1>About Us</h1>
<p>We help entrepreneurs.</p>
{% endblock %}8. Why inheritance is useful
Without it:
home.html → navigation + content + footer
about.html → navigation + content + footer
contact.html → navigation + content + footerWith it:
base.html
├── navigation
└── footer
home.html
└── content
about.html
└── content
contact.html
└── contentChange the navigation once.
9. URL tags
If a URL is named:
path("about/", about, name="about")a template can use:
<a href="{% url 'about' %}">About</a>This is often preferable to hard-coding paths throughout templates.
10. Static files
You may see:
{% load static %}and:
<link
rel="stylesheet"
href="{% static 'main/css/style.css' %}"
>This connects the template to Django's static-file system.
11. Be careful with safe
You may encounter:
{{ content|safe }}This tells Django not to escape the content in the usual way.
If AI introduces safe, ask why it is necessary.
Do not use it blindly for user-generated content.
12. Exercise
Create:
base.html
home.html
about.html
contact.htmlPut shared navigation/footer in base.html.
Use {% extends %} and {% block %}.
13. Using ChatGPT
Ask:
Explain how template inheritance works in this project. Identify what belongs in base.html and what belongs in child templates. Do not rewrite the files.Remember
Templates connect application data to HTML.
View
↓
data
↓
template
↓
HTMLTemplate inheritance prevents unnecessary duplication.
Finished this lesson?
Keep your place here, or save it across devices with an email link.
Saved in this browser. Save progress with email →