Django is popular framework python developers used by many large companies including Google, Facebook, and Instagram.
In this guide, we will learn how to create a Django project, create a view, create a template, and add CSS and JavaScript to our project. We will also learn how to run the server and view the output.
First, you need to install python on your computer. You can do this by running the following command in your terminal, after setting up a virtual environment.
python3 -m venv venvTo activate your virtual environment:
source venv/bin/activateThis is a regular way but these days I am using pipx to manage virtual environment and other tools. It's ridiculously easy and fast and cross-platform.
pipx install virtualenvTo create a virtual environment:
venv .To activate the virtual environment:
. venv/bin/activateNow for all installations, you can use pipx command. For example, to install Django, run the following command:
pip install Django
pip install -r requirements.txtA Django project is a collection of settings and configurations that define the structure and behavior of a web application. It includes the code for the application, as well as the templates, static files, and other resources that make up the application.
To create a new Django project, you can use the following command:
django-admin startproject <your-project-name>
cd <your-project-name>This will create a new directory called Django-project with the basic structure of a Django project.
To start the Django server, you can use the following command:
python manage.py runserverThis will start the server and make it accessible at localhost:8000. You will address this in a later section.
Ignore the unapplied migrations warning. This is a common issue when starting a new Django project. We will address this in a later section.
Create a new file called views.py in the django-project directory. In this file, we will define a few views that are simple functions that return a response. We want to have home page, about page, and contact page. Each of these pages will return HTML content.
from django.http import HttpResponse
def home(request):
return HttpResponse("Welcome to Chai Django Project. Home page")
def about(request):
return HttpResponse("Welcome to Chai Django Project. About page")
def contact(request):
return HttpResponse("Welcome to Chai Django Project. Contact page")Now, we need to map the URLs to these views. In your Django project, locate the urls.py file (it should be in the same directory as settings.py and wsgi.py). Open this file and add the following lines of code to define your URL patterns:
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home, name='home'),
path('about/', views.about, name='about'),
path('contact/', views.contact, name='contact'),
]Now, let's run the server again and visit the following URLs:
You should see the following output:
Welcome to Chai Django Project. Home page
Welcome to Chai Django Project. About page
Welcome to Chai Django Project. Contact pageIn Django, templates are used to generate HTML pages. They are used to display data and perform logic in a web application. To create a template, you can create a new file called templates/index.html in the Django-project directory. Make sure that template folder is at same level as manage.py file. In this file, you can write HTML code that will be used to generate the HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chai Django Project</title>
</head>
<body>
<h1>Welcome to Chai Django Project</h1>
<h2>Welcome to Chai Django Project</h2>
<h3>Welcome to Chai Django Project</h3>
</body>
</html>Now, you need to tell Django where to find your templates. Open settings.py and add your templates directory to the TEMPLATES setting.
'DIRS': [BASE_DIR / 'templates'], /* Inside TEMPLATES section */In the views.py file, add the following line at the top of the file:
from django.shortcuts import renderNow, let's change the home view to use the new template:
def home(request):
return render(request, "index.html")Now, let's run the server again and visit the localhost:8000 URL. You should see the following output:
Welcome to Chai Django ProjectTo add CSS and JavaScript to your Django project, you can create a new file called static/main.css in the Django-project directory. In this file, you can write CSS code that will be used to style the HTML page. You can also create a new file called static/app.js in the Django-project directory. In this file, you can write JavaScript code that will be used to add interactivity to the HTML page.
.body {
background-color: #030303;
font-family: Arial, sans-serif;
color: #fff;
}console.log("Hello, World!");To add this CSS file to the settings.py and add the following line:
import os
[...]
/* Inside TEMPLATES section */
'STATIC_URL': '/static/',
STATICFILES_DIRS = [BASE_DIR / 'static'],
STATIC_ROOT = BASE_DIR / 'staticfiles',In the index.html file, add the following line at the top of the file:
{% load static %}Now, let's change the body view to use the new template:
from django.shortcuts import render
def home(request):
return render(request, "index.html")In this tutorial, we have learned how to create a Django project, create a view, create a template, and add CSS and JavaScript to our project. We will have also learned how to run the server and view the output. This is the end of the first part of the tutorial. We will briefly have more fun with the next part by deeply enjoying Chai aur Django.
All of our courses are available on shaharyarranjah.com. Feel free to check them out!
Compiled by Shaharyar Ranjah
Last Updated: Apr 18, 2025