Welcome to Day 3 of the Django for Beginners series!
Yesterday, we learned how to display data using templates and serve static files. Today, we’ll take your UI structure to the next level with template inheritance, filters, tags, and a clean layout.

📍 What You’ll Learn

Using base templates with inheritance
Applying template filters and control structures
Building a clean, reusable, and scalable frontend layout
Creating a multi-page responsive portfolio site

1. Template Inheritance (DRY Layouts)

In Django, you can reuse HTML structure using a base template.

Step 1: Create a base template

<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Django Site{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>

Step 2: Extend it in child templates

<!-- homepage/templates/homepage/home.html -->
{% extends "base.html" %}

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

{% block content %}
    <h2>Welcome to Day 3!</h2>
    <p>This is rendered inside the base layout.</p>
{% endblock %}

📌 This approach lets you reuse title and content across all pages.

2. Template Filters and Tags

Django provides a template language to perform logic inside templates.

Common Template Filters

{{ name|upper }}      {# ALL CAPS #}
{{ name|title }}      {# Capitalize Each Word #}
{{ date_joined|date:"F j, Y" }}  {# Format date #}

Control Tags

{% if user.is_authenticated %}
  Hello, {{ user.username }}!
{% else %}
  Hello, guest!
{% endif %}

{% for item in items %}
  <li>{{ item }}</li>
{% empty %}
  <li>No items found.</li>
{% endfor %}

3. Project: Mini Portfolio Website (Multipage)

🎯 You’ll now build a clean, responsive multipage personal portfolio.

Project Structure

project/
├── homepage/
│   ├── templates/homepage/
│   │   ├── home.html
│   │   ├── about.html
│   │   ├── skills.html
│   │   └── contact.html
├── templates/base.html
├── static/css/style.css

`base.html`

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Portfolio{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <nav>
        <a href="{% url 'home' %}">Home</a>
        <a href="{% url 'about' %}">About</a>
        <a href="{% url 'skills' %}">Skills</a>
        <a href="{% url 'contact' %}">Contact</a>
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>

`home.html`

{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<h1>Hello, I’m Django Developer</h1>
<p>Welcome to my personal site built with Django templates.</p>
{% endblock %}

`about.html`

{% extends 'base.html' %}
{% block title %}About{% endblock %}
{% block content %}
<h1>About Me</h1>
<p>I’m a software engineer passionate about Python and Django development.</p>
{% endblock %}

`skills.html`

{% extends "base.html" %}
{% block title %}Skills{% endblock %}
{% block content %}
<h2>My Skills</h2>
<ul>
  {% for skill in skills %}
    <li>{{ skill|title }}</li>
  {% endfor %}
</ul>
{% endblock %}

`contact.html`

{% extends 'base.html' %}
{% block title %}Contact{% endblock %}
{% block content %}
<h1>Contact</h1>
<p>Email: shankarlmc012@gmail.com</p>
<p>Location: Pokhara, Nepal</p>
{% endblock %}

`homepage/views.py`

from django.shortcuts import render

def home(request):
    template_name = 'homepage/home.html'
    return render(request, template_name)

def about(request):
    template_name = 'homepage/about.html'
    return render(request, template_name)

def contact(request):
    template_name = 'homepage/contact.html'
    return render(request, template_name)

def skills(request):
    context = {
        'skills': ['python', 'django', 'html', 'css']
    }
    template_name = 'homepage/skills.html'
    return render(request, template_name, context)

`homepage/urls.py`

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('about/', views.about, name='about'),
    path('skills/', views.skills, name='skills'),
    path('contact/', views.contact, name='contact'),
]

`static/css/style.css`

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

nav {
    background: #222;
    padding: 1em;
    text-align: center;
}

nav a {
    color: #fff;
    margin: 0 1em;
    text-decoration: none;
}

main {
    padding: 2em;
}

🛠️ Final Task for Day 3

Add one more page (e.g., Projects or Services)
Use at least one template filter
Use a {% for %} loop in one of the pages
Use a simple {% if %} condition

🧭 What’s Next?

In Day 4, we’ll cover:

Define Django models
Run and understand migrations

🧩 Day 3: Templates – Beginner's Web Dev Series