🔗 Day 2: URLs, Views & Templates – Beginner's Web Dev Series

Shankar LamichhaneShankar Lamichhane
3 min read

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 /profile that 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 for loop 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

0
Subscribe to my newsletter

Read articles from Shankar Lamichhane directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Djangourls

Written by

Shankar Lamichhane
Shankar Lamichhane

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.