🔗 Day 2: URLs, Views & Templates – Beginner's Web Dev Series
Hi, I’m Shankar — a Sr. Software Engineer specializing in Python, Django, and DevOps. I build scalable web applications, APIs, and cloud-native systems, with a focus on clean architecture and backend automation.
Welcome back to Day 2 of our Django for Beginners Series!
In Day 1, we set up our first Django project and app. Now it’s time to dive deeper into how Django connects URLs to views, serves HTML templates, and loads CSS and images using the static files system.
Let’s level up your project structure and presentation!
🧭 What We’ll Cover Today
URL routing (project-level & app-level)
Function-based views
Using Django templates (HTML)
Configuring static files (CSS, images, js)
Dynamic URLs with path parameters
Final hands-on task
🔗 1. Detailed URL Routing in Django
In Django, URLs route the user to a specific view.
Folder structure:
├── db.sqlite3
├── homepage
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ ├── __init__.py
│ ├── models.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── manage.py
└── mywebsite
├── __init__.py
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
Project-level (mywebsite/urls.py):
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('homepage.urls')),
]
App-level (homepage/urls.py):
Create urls.py inside your app folder if it doesn’t exist.
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
path('about/', views.about, name='about'),
]
👀 2. Understanding Function-Based Views
Views are Python functions that return HTTP responses.
from django.http import HttpResponse
def home(request):
return HttpResponse("Welcome to Day 2!")
def about(request):
return HttpResponse("This is the About Page")
Now, each URL maps to a specific view function.
🖼️ 3. Django Templates – Display HTML
Django uses templates to render HTML pages with dynamic content.
Folder structure:
homepage/
└── templates/
└── homepage/
└── home.html
home.html:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>Hello from Django Template!</h1>
</body>
</html>
Update view to use a template:
from django.shortcuts import render
def home(request):
return render(request, 'homepage/home.html')
Update view to use a template with context data:
from django.shortcuts import render
def home(request):
context = {
"page_title": "Django Day 2",
"message": "Welcome to Day 2 of Django!"
}
return render(request, 'homepage/home.html', context)
home.html
<!DOCTYPE html>
<html>
<head>
<title>{{ page_title }}</title>
</head>
<body>
<h1>{{ message }}</h1>
</body>
</html>
🎨 4. Static File Setup (CSS, Images, JS)
1. Project structure:
static/
└── css/
└── style.css
└── images/
└── logo.png
└── scripts/
└── app.js
2. In settings.py:
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
3. In urls.py:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Django will now look inside the
static/folder during development.
4. In home.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{{ page_title }}</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<img src="{% static 'images/logo.png' %}" alt="Logo" />
<h1>{{ message }}</h1>
<script src="{% static 'scripts/app.js' %}"></script>
</body>
</html>
🌐 5. Dynamic URLs with Path Parameters
Dynamic URLs let you pass variables via the URL.
In urls.py:
path('hello/<str:username>/', views.greet_user, name='greet_user')
In views.py:
def greet_user(request, username):
return HttpResponse(f"Hello, {username}!")
Try this:
👉 Visit http://127.0.0.1:8000/hello/Sabin/
You’ll see: Hello, Sabin!
🛠️ Final Task for Day 2
🔧 Build a small webpage with these features:
Home route (
/) should render a template saying: "Welcome to Day 2 of Django!"Add a route
/hello/<name>/that greets the user dynamically.Add a route
/profilethat displays user details with dynamic data.Style the page using an external CSS file from
static/css/style.css.Display an image on the page using
static/images/.
✅ Bonus:
- Try adding a
forloop in your template to render a list of items.
🧭 What’s Next?
In Day 3, we’ll cover:
Template inheritance (base layout)
Template tags and filters
Reusable template structure
Building a mini portfolio website
