Getting Started

Django is popular framework amongst python developers and 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.

What is Django?

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. It takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel.

Django is a full-featured web framework that follows the Model-View-Controller (MVC) architectural pattern. It provides a set of tools and libraries for building web applications, including an ORM, a templating engine, and a built-in admin interface.

Environment Setup

To get started with Django, you’ll need to install it on your computer. You can do this by running the following command in your terminal, after setting up a virtual environment:

python3 -m venv .venv

# to activate the virtual environment
source .venv/bin/activate

python -m venv .venv

# to activate the virtual environment
.venv\Scripts\activate

python3 -m venv .venv

# to activate the virtual environment
source .venv/bin/activate

This is regular way but these days I am using uv to manage virtual environment and other tools. It’s ridiculously easy and fast and cross-platform.

brew install uv

# to create a virtual environment
uv venv

# to activate the virtual environment
source .venv/bin/activate

powershell -c "irm https://astral.sh/uv/install.ps1 | iex"

# to create a virtual environment
uv venv

# to activate the virtual environment
.venv\Scripts\activate

pip install uv

# to create a virtual environment
uv venv

# to activate the virtual environment
source .venv/bin/activate

Now for all installations, you can use uv pip install command. For example, to install Django, run the following command:

uv pip install django

uv pip install -r requirements.txt

Django Project

A 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 chai-aur-django

cd chai-aur-django

This will create a new directory called chai-aur-django with the basic structure of a Django project.

Start a Django Server

To start the Django server, you can use the following command:

python manage.py runserver

This will start the server and make it accessible at localhost:8000.

Ignore the unapplied migrations warning. This is a common issue when starting a new Django project. We will address this in a later section.

Creating our first views

Create a new file called views.py in the chai-aur-django 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("<h1>Welcome to Chai's Django Project: Home page</h1>")

def about(request):
  return HttpResponse("<h1>Welcome to Chai's Django Project: About page</h1>")

def contact(request):
  return HttpResponse("<h1>Welcome to Chai's Django Project: Contact page</h1>")

Now, let’s create a new file called urls.py in the chai-aur-django directory. In this file, we will define the URL patterns for our application. If the file is already there, you can just add the following code to the end of the file:

from django.urls import path
from . import views

urlpatterns = [
  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's Django Project: Home page
Welcome to Chai's Django Project: About page
Welcome to Chai's Django Project: Contact page

Adding Templates

In 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 chai-aur-django 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>
  <head>
    <title>Welcome to Chai's Django Project</title>
  </head>
  <body>
    <h1>Welcome to Chai's Django Project</h1>
  </body>
</html>

Now, let’s run the server again and visit the http://localhost:8000/ URL. You should see the following output:

Welcome to Chai's Django Project

Adding CSS and JavaScript

To add CSS and JavaScript to your Django project, you can create a new file called static/css/style.css in the chai-aur-django 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/js/script.js in the chai-aur-django directory. In this file, you can write JavaScript code that will be used to add interactivity to the HTML page.

body {
  background-color: #161616;
  font-family: Arial, sans-serif;
  color: #fff;
}

console.log("Hello, world!");

To add this css file go to settings.py and add the following line:

import os
'DIRS': ['templates'], # inside template section

STATIC_URL = '/static/' # below this add the following line
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

In the index.html file, add the following line at the top of the file:

{% load static %}

<link rel="stylesheet" href="{% static 'css/style.css' %}">

Now, let’s change the home view to use the new template:

from django.shortcuts import render

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's Django Project

Summary

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 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 surely have more fun in the next part. Keep enjoying Chai aur Django!

Start your journey with ChaiCode

All of our courses are available on chaicode.com. Feel free to check them out.