Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Mini-Build: Dynamic Multi-Page Website
Let's put everything together! Build a dynamic multi-page Django website with template inheritance, static files, navigation, and dynamic content. This mini-project combines all Module 3 concepts into a working website.
Project Structure
- Base template with navigation, header, footer
- Home page with dynamic content
- About page with team member list
- Blog page with post listing
- Static CSS for styling
- Template inheritance - all pages extend base.html
- Named URLs for navigation links
- Custom template filter for read time
Mini-Build Code
# Project Structure:
# mysite/
# templates/base.html
# static/css/style.css
# pages/
# templates/pages/home.html
# templates/pages/about.html
# views.py
# urls.py
# blog/
# templates/blog/list.html
# views.py
# urls.py
# templates/base.html
# {% load static %}
# <!DOCTYPE html>
# <html>
# <head>
# <title>{% block title %}My Site{% endblock %}</title>
# <link rel="stylesheet" href="{% static 'css/style.css' %}">
# </head>
# <body>
# <nav>
# <a href="{% url 'pages:home' %}">Home</a>
# <a href="{% url 'blog:list' %}">Blog</a>
# <a href="{% url 'pages:about' %}">About</a>
# </nav>
# <main>{% block content %}{% endblock %}</main>
# <footer>Copyright 2026</footer>
# </body>
# </html>
# pages/views.py
# def home(request):
# return render(request, 'pages/home.html', {
# 'title': 'Welcome to My Site',
# 'features': ['Django', 'Templates', 'Static Files'],
# })
# def about(request):
# team = [
# {'name': 'Alice', 'role': 'Developer'},
# {'name': 'Bob', 'role': 'Designer'},
# ]
# return render(request, 'pages/about.html', {'team': team})
# pages/templates/pages/home.html
# {% extends 'base.html' %}
# {% block title %}Home{% endblock %}
# {% block content %}
# <h1>{{ title }}</h1>
# <ul>
# {% for feature in features %}
# <li>{{ feature }}</li>
# {% endfor %}
# </ul>
# {% endblock %}Try It Yourself
?? Tip
Tip
Use {% include %} for reusable components like cards, modals. Pass variables with {% include 'card.html' with title=post.title %}
QuerySets are LAZY - no DB hit until evaluated.
?? Common Mistake
Warning
Not organizing templates properly. Use app_name/template_name.html structure to avoid conflicts between apps.
?? Practice Task
Note
(1) Build a complete blog template system. (2) Use inheritance, includes, and custom tags. (3) Add pagination.
Quick Quiz
Key Takeaways
- Let's put everything together.
- Base template with navigation, header, footer
- Home page with dynamic content
- About page with team member list