# π Day 2: URLs, Views & Templates β Beginner's Web Dev Series
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:
```plaintext
βββ 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`](http://urls.py)):
```python
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`](http://urls.py)):
Create [`urls.py`](http://urls.py) inside your app folder if it doesnβt exist.
```python
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.
```python
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:
```plaintext
homepage/
βββ templates/
βββ homepage/
βββ home.html
```
### `home.html`:
```html
Home
Hello from Django Template!
```
### Update view to use a template:
```python
from django.shortcuts import render
def home(request):
return render(request, 'homepage/home.html')
```
### Update view to use a template with context data:
```python
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
```xml
{{ page_title }}
{{ message }}
```
---
## π¨ 4. Static File Setup (CSS, Images, JS)
### 1\. Project structure:
```plaintext
static/
βββ css/
βββ style.css
βββ images/
βββ logo.png
βββ scripts/
βββ app.js
```
### 2\. In [`settings.py`](http://settings.py):
```python
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
```
### 3\. In [`urls.py`](http://settings.py):
```python
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`](http://settings.py):
```xml
{% load static %}
{{ page_title }}
{{ message }}
```
---
## π 5. Dynamic URLs with Path Parameters
Dynamic URLs let you pass variables via the URL.
### In [`urls.py`](http://urls.py):
```python
path('hello//', views.greet_user, name='greet_user')
```
### In [`views.py`](http://views.py):
```python
def greet_user(request, username):
return HttpResponse(f"Hello, {username}!")
```
Try this:
π Visit [`http://127.0.0.1:8000/hello/Sabin/`
Youβll](http://127.0.0.1:8000/hello/Alex/%EF%BF%BCYou%E2%80%99ll) 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//` 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
---
