How to start with Django
Tags: django, beginners, webdev, programming
Published: 2023-09-21 15:13:15

Hi, guys!🤗 Hope you’re doing well. I want to show you how to make a website with Django!  Hope you will enjoy it!😄
Prerequisites:

1. Basic knowledge of Python 🤓
2. Understanding what is HTML, CSS, JavaScript🤓

Okay, let's get started🤩. First of all, we have to establish an environment for our project and install Django. Open your favorite IDE (Integrated development environment) or command prompt with an empty folder. I opened it in VS Code.😎
You can download it here https://code.visualstudio.com/ 

![vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klfr2h561ougg77p71me.png)
Put this command **python -m venv env** in your terminal. It will make a virtual environment which is called **env**. 🖖
![env](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0szpd01lrb3v6tebmas0.png)
Next, let’s activate the environment by this command **env/Scripts/activate** on Windows, try **source venv/bin/activate** on Mac, if it doesn’t work just look it up on the Internet for your OS. If it is activated you will see (env) on the left of the prompt.🧑‍💻
![activation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjqgyl1z3vgthy8b7qxi.png)
Install Django using this command: **pip install django**👨‍💼
![install django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39wp70agnll0k5hzmwwb.png)

Then create a new project using this command: **django-admin startproject my_project .**, I called my project **my_project**. Point in the end adds our project to our folder without adding a new folder with the same name. 

![project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50nhd4wgsa0meveqy2eb.png)

![files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bh52myi89w038li9yb7c.png)
We have a lot of files, most of them we are not going to use in this tutorial. 😵😵😵
_Setting.py_ It’s our main file where we can change some configuration of our project, 
_Urls.py_ Here we will add path to our apps. 
_Manage.py_ We will be using it during migrations and adding new apps.😲
Let’s add a new app **python manage.py startapp main** 🤔:
![app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fm8cawzrf3riisir9sb6.png)
We have a new app called main.

![app files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugiga39lrpakgxf8ql0o.png)
Let’s add a new file _urls.py_ in the main app and **import path from Django.urls**, **from . (point means import  from this app ) import views**, write **urlpatterns  = []**🤯:

![urls](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prtru8cvlc35ef74pw70.png)
Add your app path in **my_project** _urls_, **import include from  Django.urls** as well: 

![main urls](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0asbasg7hraf6iucf7l.png)
Then in **my_project settings.py** add app name (main) into **INSTALLED_APPS** like this🙃:

![settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmjq191twika432eyvwk.png)
Make migration using this command: **python manage.py migrate**😮‍💨

![migrate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9chpxli8ejdsf30625m.png)

![success migration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnp30rhjgyptrp9utz23.png)
This command saves everything in the database (SQLite), you can see the new file db.sqlite3:

![sqlite3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eper3brnw694ry93ktup.png)
Let’s create a superuser by using this command **python manage.py createsuperuser**, add username, email, and password 👮‍♂️:

![superuser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lvvgbieec1048djxyc0.png)
We can run our project **python manage.py runserver** and open the admin page, just click on  **http://127.0.0.1:8000/ + CTRL**, if you want to stop **CTRL+C**👩‍💻:

![start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zibmq3recvcbxtay5a62.png)
And put in your URL **http://127.0.0.1:8000/admin**, then put your name and password to log in admin page👩‍💻:

![url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ldgplpefbfuxmr4af4.png)

![admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwzzvb19snqx2vwnx9gt.png)
You will see Django administration page:

![admin page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi9cgrf9g3al9nsr23lg.png)
You can change the appearance by changing the configuration in admin CSS file(not in this tutorial).
Add in models.py new model👌 Almost done:

![model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwfxoriwro9u320ytazp.png)
And make migrations **python manage.py makemigration** and **python manage.py migrate**:

![makemigrations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bij7jsa8ku8hrmwwsuf.png)

![migrate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ero10y3rsr2nhn2n6gc0.png)
Add model in admin.py 👨‍🎨:

![admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9paalnu4s02lzeerzca.png)
After this, we can see it on our admin page:

![admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrz9pq8fdj0ys81igqu7.png)
We can add data into category👨‍🎨:

![data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpwswkyupzhwko59auj8.png)

![data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyc3uxcex98y0zctkdp0.png)
We have PC has blank text and it works because we added blank=True before in our model.👨‍🎓

Create **templates** folder in **main** app and then inside this folder add a folder named **main**.

![templates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dizj51muvun7m8ol9yip.png)
Add **index.html** file into this main folder.

![index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cy58u0m2ecm6jirclvv.png)

Add this in views.py in **main** app:
Categories take our data from the database and return render shows on the screen.🤨

![views](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfcabms3jknotjfjy0t3.png)
In main **urls.py** add **path** with imported views.

![urls](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta6h20fttuqmksrvwral.png)
Add this to index.html file👩‍🎨:


![index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0esacfyoqpf0n6liex4c.png)

**block endblock** – means start and end of dynamic part of the index.html
**for endfor** – it’s like for loop in Python.
**category.title** – it’s our data from database.🧐
On localhost page you will see our data😎:

![page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85h6p8yzs9t7oy1n68gk.png)

Thank you for reading. I hope you enjoyed it!🥳🥳🥳
Let's connect on X(Twitter) https://twitter.com/volodys1ove 
Discord: https://discord.gg/z8Dzb4Hv