Template inheritance with base template in Django - Mini Project: Build & Apply

Template inheritance with base template

📖 Scenario: You are building a simple website with multiple pages that share the same header and footer. To avoid repeating the same HTML code on every page, you will use Django's template inheritance feature.

🎯 Goal: Create a base template called base.html with a header and footer. Then create a child template called home.html that inherits from base.html and fills in the main content area.

📋 What You'll Learn

Create a base template base.html with a header, footer, and a block named content.

Create a child template home.html that extends base.html.

Override the content block in home.html with a welcome message.

Use correct Django template syntax for inheritance and blocks.

💡 Why This Matters

🌍 Real World

Websites often share common page parts like headers and footers. Template inheritance lets developers write these parts once and reuse them, saving time and reducing errors.

💼 Career

Understanding template inheritance is essential for Django developers to build maintainable and scalable web applications.

1

Create the base template base.html

Create a file named base.html. Inside it, write HTML with a <header> containing the text My Website Header, a <footer> containing the text My Website Footer, and a Django template block named content between them. Use the exact block syntax: {% block content %}{% endblock %}.

Django

# Your code here

Need a hint?

Use HTML tags <header> and <footer>. Put {% block content %}{% endblock %} between them.

2

Create the child template home.html and extend base.html

Create a file named home.html. At the top, write the Django template tag to extend base.html exactly as {% extends "base.html" %}.

Django

My Website Header
{% block content %}{% endblock %}
My Website Footer

{# Add the extends tag below #}
# Your code here

Need a hint?

Use the {% extends "base.html" %} tag at the top of home.html.

3

Override the content block in home.html

In home.html, add a block named content using {% block content %} and {% endblock %}. Inside this block, write the text Welcome to the Home Page! exactly.

Django

My Website Header
{% block content %}{% endblock %}
My Website Footer

{% extends "base.html" %}

{# Add content block with welcome message below #}
# Your code here

Need a hint?

Use the block tags to override the content block and add the welcome text inside.

4

Complete the template inheritance setup

Ensure home.html starts with {% extends "base.html" %} and contains the content block with the welcome message. The base template base.html should have the header, footer, and the content block. This completes the template inheritance setup.

Django

My Website Header
{% block content %}{% endblock %}
My Website Footer

{% extends "base.html" %}

{% block content %}Welcome to the Home Page!{% endblock %}

# Verify the structure is complete

Need a hint?

Check that home.html extends base.html and overrides the content block. Also check that base.html has header and footer.