❌ What is a 404 Page?

A 404 page appears when users visit a URL that doesn't exist. Custom 404 templates provide helpful error messages and guide users back to working pages.


<!-- 404.html -->
<h1>Page Not Found</h1>
<p>The page you're looking for doesn't exist.</p>

Error Page Types

🔍

404 Error

Page not found

404.html

⚠️

500 Error

Server error

500.html

🚫

403 Error

Permission denied

403.html

⛔

400 Error

Bad request

400.html

🔹 Step 1: Create 404 Template

Django automatically looks for 404.html in your templates folder when a page isn't found. Create a user-friendly error page that helps visitors navigate back to your site.

<!-- templates/404.html -->
{% extends 'base.html' %}

{% block title %}Page Not Found{% endblock %}

{% block content %}
    <div style="text-align: center; padding: 50px;">
        <h1 style="font-size: 5rem; color: #e74c3c;">404</h1>
        <h2>Oops! Page Not Found</h2>
        <p>The page you're looking for doesn't exist.</p>
        <p>It might have been moved or deleted.</p>
        
        <div style="margin-top: 30px;">
            <a href="{% url 'index' %}" style="padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 5px;">
                Go to Homepage
            </a>
        </div>
    </div>
{% endblock %}

Output:

404

Oops! Page Not Found

The page you're looking for doesn't exist.

It might have been moved or deleted.

Go to Homepage

🔹 Step 2: Enable Debug Mode Off

Custom error pages only appear when DEBUG is False in production. During development with DEBUG=True, Django shows detailed error information instead of your custom templates.

# settings.py
DEBUG = False
ALLOWED_HOSTS = ['yourdomain.com', 'localhost', '127.0.0.1']

Important:

DEBUG = True: Shows detailed error pages (development)
DEBUG = False: Shows custom error templates (production)
Always add your domain to ALLOWED_HOSTS when DEBUG is False

🔹 Create 500 Error Template

The 500 error page appears when your server encounters an internal error. Keep it simple since the server might be in a problematic state when this page displays.

<!-- templates/500.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Server Error</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 4rem; color: #e74c3c; }
    </style>
</head>
<body>
    <h1>500</h1>
    <h2>Internal Server Error</h2>
    <p>Something went wrong on our end.</p>
    <p>We're working to fix it. Please try again later.</p>
    <a href="/">Return to Homepage</a>
</body>
</html>

Note:

500.html should NOT extend base.html or use template tags, as the error might prevent template rendering.

🔹 Enhanced 404 Page

Create a more helpful 404 page with search functionality and popular page links. This improves user experience by providing multiple ways to find what they're looking for.

<!-- templates/404.html -->
{% extends 'base.html' %}

{% block content %}
    <div class="error-page">
        <h1>404</h1>
        <h2>Page Not Found</h2>
        <p>We couldn't find what you're looking for.</p>
        
        <div class="search-box">
            <form action="{% url 'search' %}" method="get">
                <input type="text" name="q" placeholder="Search our site...">
                <button type="submit">Search</button>
            </form>
        </div>
        
        <div class="helpful-links">
            <h3>Try these popular pages:</h3>
            <ul>
                <li><a href="{% url 'index' %}">Home</a></li>
                <li><a href="{% url 'products' %}">Products</a></li>
                <li><a href="{% url 'blog' %}">Blog</a></li>
                <li><a href="{% url 'contact' %}">Contact Us</a></li>
            </ul>
        </div>
    </div>
{% endblock %}

🔹 Custom 404 View

Create a custom view for more control over 404 responses. This allows you to log errors, suggest similar pages, or customize the response based on the requested URL.

# views.py
from django.shortcuts import render

def custom_404(request, exception):
    return render(request, '404.html', status=404)

# urls.py (main project urls.py)
handler404 = 'myapp.views.custom_404'

🔹 Testing Error Pages

Test your error pages during development by creating test views that raise errors. This lets you see how your custom templates look without deploying to production.

# views.py (for testing only)
from django.http import Http404

def test_404(request):
    raise Http404("Page not found")

def test_500(request):
    raise Exception("Server error")

# urls.py (for testing only)
urlpatterns = [
    path('test-404/', views.test_404),
    path('test-500/', views.test_500),
]

Remember:

Remove test URLs before deploying to production!

Django 404 Template