# 🧩 Day 3: Templates – Beginner's Web Dev Series 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 ```html {% block title %}My Django Site{% endblock %}
{% block content %}{% endblock %}
``` --- ### Step 2: Extend it in child templates ```html {% extends "base.html" %} {% block title %}Home Page{% endblock %} {% block content %}

Welcome to Day 3!

This is rendered inside the base layout.

{% 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 ```html {{ name|upper }} {# ALL CAPS #} {{ name|title }} {# Capitalize Each Word #} {{ date_joined|date:"F j, Y" }} {# Format date #} ``` ### Control Tags ```html {% if user.is_authenticated %} Hello, {{ user.username }}! {% else %} Hello, guest! {% endif %} ``` ```html {% for item in items %}
  • {{ item }}
    • {% empty %}
  • No items found.
    • {% endfor %} ``` --- ## 3\. Project: Mini Portfolio Website (Multipage) 🎯 You’ll now build a clean, responsive multipage **personal portfolio**. ### Pages: * Home – Welcome message * About – Your bio * Skills – Dynamically loaded list of skills * Contact – Static info --- ### Project Structure ```xml project/ β”œβ”€β”€ homepage/ β”‚ β”œβ”€β”€ templates/homepage/ β”‚ β”‚ β”œβ”€β”€ home.html β”‚ β”‚ β”œβ”€β”€ about.html β”‚ β”‚ β”œβ”€β”€ skills.html β”‚ β”‚ └── contact.html β”œβ”€β”€ templates/base.html β”œβ”€β”€ static/css/style.css ``` --- ### `base.html` ```html {% load static %} {% block title %}Portfolio{% endblock %}
    {% block content %}{% endblock %}
    ``` --- ### `home.html` ```html {% extends 'base.html' %} {% block title %}Home{% endblock %} {% block content %}

    Hello, I’m Django Developer

    Welcome to my personal site built with Django templates.

    {% endblock %} ``` ### `about.html` ```html {% extends 'base.html' %} {% block title %}About{% endblock %} {% block content %}

    About Me

    I’m a software engineer passionate about Python and Django development.

    {% endblock %} ``` ### `skills.html` ```html {% extends "base.html" %} {% block title %}Skills{% endblock %} {% block content %}

    My Skills

    {% endblock %} ``` ### `contact.html` ```html {% extends 'base.html' %} {% block title %}Contact{% endblock %} {% block content %}

    Contact

    Email: shankarlmc012@gmail.com

    Location: Pokhara, Nepal

    {% endblock %} ``` ### `homepage/views.py` ```python 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` ```python 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` ```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 ---