Getting Started with Django:

Your First Web Development Project


squirrel-construction-worker

If you’ve been curious about web development, starting your journey with Django might just be the right choice for you. As a powerful framework, Django is designed to help developers build web applications more easily and efficiently. Whether you're looking to create a simple blog or a more complex website, Django offers a solid framework to help you along the way.

In this blog post, I want to walk you through the process of setting up your very first Django project. My goal is to make this as straightforward as possible. We’ll cover the initial setup of a new Django project and how to start your first Django app, setup routing and display a simple HTML template. Don’t worry if you’re new to coding; you don’t need to be an expert to start. All it takes is a little curiosity and a willingness to learn.

By the end of this post, you’ll have your first Django application up and running. I hope this guide gives you the confidence to explore further. So, let's get started.

0. Prerequisites

Before we proceed with this tutorial, it's important to make sure you have Python installed on your machine. You can check this by running the command Python --version in a terminal. If Python is installed, the version number will be displayed. Django, the web framework we’ll be working with, is built on Python, so having it set up is essential. If you haven't installed Python yet, you can find detailed instructions on how to do so at their official website at python.org.

Python is great language to learn; it’s a versatile language with a wealth of excellent resources and good documentation to help you along the way.

Additionally, while it's not strictly necessary, having a basic understanding of how to navigate the command line or terminal will be beneficial. But as we'll only use a few basic commands like mkdir, ls, and cd, do not worry too much about this.

1. Create a new project directory

Now, let’s get back to our Django web development project. To start, open your terminal and navigate to the directory where you'd like to create your new Django project. If you prefer, you can create a new directory in a location that works for you. To do this from the terminal, you can use the command mkdir projectname. For our example, let’s name this folder "MyFirstDjango," so the command will be mkdir MyFirstDjango. Once you've created the folder, the next step is to move into it using the command cd MyFirstDjango.


2. Setup virtual environment

For any Django project, setting up a virtual environment makes sense. A virtual environment allows you to keep your project separate from others on your machine, providing a dedicated space for Django and any additional dependencies you may need. This way, you can avoid version conflicts – perhaps one project requires a specific version of a library while another requires a different one.

To create a virtual environment, navigate to your project’s directory in the terminal and type the following command: python -m venv myenv, and then hit enter. (Feel free to choose a different name for your environment if you prefer.) After executing this command, you can use the ls command to see that a new folder named "myenv" has been created within your project directory. Next, you'll want to activate the virtual environment you just set up. If you’re using Windows, run the command myenv\Scripts\activate. For Mac users, the command is source myenv/bin/activate. Once activated, you’ll notice the name of your environment appears in front of your command prompt, signifying that your virtual environment is now up and running.

virtual environment

3. Install Django

With your virtual environment now activated, it's time to install Django for your project. You can easily do this by running the command pip install django, which will download the latest version by default. If you want to install a specific version, you can specify it like this: pip install django==4.2.4. Make sure to wait for the installation process to finish completely.

As an optional step, you can run pip freeze to see the installed version of Django along with some additional information about other packages in your virtual environment.


4. Start a new Django project

With Django successfully installed in your project folder, you can now initiate a new Django project by running the command django-admin startproject myproject. (Feel free to choose a different name for your project if you prefer; however, naming it after the folder you originally created is a common practice.)

After executing this command, list the contents of the directory again using ls. You should see at least two directories: one for the virtual environment and another for your project. Don’t be confused—it’s structured as a single directory containing your project name, and within that, you’ll find the virtual environment directory along with the folder that holds the Django project created by the startproject command.

Next, navigate into the newly created Django project directory by using the cd command. When you run ls here, you’ll notice a manage.py file along with a directory that shares the same name as the project. This can result in a structure that looks like a directory named foo containing foo/foo, and that’s perfectly normal. In our example, it is myproj/mydjango, for clarification only.


5. Start a new app

Once your Django project is up and running, the next step is to create an app within that project. A Django project can consist of one or more apps. While it’s natural to feel a little confused at first, just remember that apps serve as building blocks for your web application. For instance, one app could handle user authentication, while another might be responsible for managing blog entries.

To initiate a new app in your Django project, simply run the command python manage.py startapp myapp. As before, you can choose any name you like for your app in place of "myapp." After executing this command, if you list the directory contents again with ls, you will see the newly created app as a folder, positioned at the same level as the manage.py file inside the directory created by the startproject command.


6. Work with the project in your IDE or text editor

We’re almost finished with the setup process! Now it’s time to dive into the coding. Open your favorite text editor or IDE and select "Open Project." For a Django project, the Pycharm IDE is a good option. Navigate to the directory where your Django project folder is located. In this case, you’ll want to select the outermost directory that contains both the virtual environment and all the subdirectories you’ve created subsequently. At this point, you should notice that Django has automatically populated both your app folder and the project folder with various Python files.


There are just a few more steps to complete the setup. First, create a new urls.py file inside your app directory and then add the app you created to the settings.py file under the installed apps section. The settings.py file contains essential configurations for your Django project, including a variable called INSTALLED_APPS. At the end of this list, simply add a new line with "myapp" before the closing brackets. Remember to include a comma after it, and then save your changes to the settings.py file.


                  INSTALLED_APPS = [
                    "django.contrib.admin",
                    "django.contrib.auth",
                    "django.contrib.contenttypes",
                    "django.contrib.sessions",
                    "django.contrib.messages",
                    "django.contrib.staticfiles",
                    "myapp",
                  ]
                

Next, open the existing urls.py file in the outer folder. At the top, you’ll need to modify the import statement: change from django.urls import path to from django.urls import path, include. This adjustment is necessary to inform Django about the secondary urls.py file that you will create, which will contain all the URLs relevant to your app. You can think of this process as navigating through a city: the top-level urls.py file indicates which street (app) you’re on, while the app’s urls.py file provides details about the specific house (URLs) within that street.

In the existing urls.py file, there'll already be a list of urlpatterns, having one entry only:


                  urlpatterns = [
                    path("admin/", admin.site.urls),
                    ]
                  

We are going to just add another line to this list:


                  urlpatterns = [
                    path("admin/", admin.site.urls),
                    path('', include('myapp.urls')),
                    ]
                  

Save the file. If you haven't done so already, now create the urls.py file for the myapp app. If you’re using an IDE, you can simply right-click on the folder, select "New," and then choose to add a new file. Alternatively, if you prefer the terminal, navigate to the directory where you want the new file to be created and run the command touch urls.py. Inside this new urls.py file, include the following lines:


                  from django.urls import path
                  from . import views

                  urlpatterns = [
                  path('', views.home, name='home'),
                  ]
                  

The import statement for views signifies that we require access to the views.py file, which is already located in the myapp directory. Don't forget to include a comma at the end of the import line, as it's crucial. It's also worth mentioning that there isn’t a view function called home present in the views.py file yet, which is why we will create it in the upcoming step.

Keep in mind that when constructing a new website or sub-site in Django, you need three fundamental elements: a URL for routing, a view function, and a template featuring the appropriate HTML file.

7. Create a view

Let's now change to the existing views.py file. At the moment, it will have only two lines of code:


                  from django.shortcuts import render
                  # Create your views here
                

We can just leave the import alone and replace the comment (after the #) with this function:


                  from django.shortcuts import render
                  def home(request):
                    return render(request, 'home.html', {})
                

Note that home.htl refers to a HTML template we want to display to every user who sends a request to our website. However, this template does not exist yet, so we need to create it in the next step.

8. Create a template

To create the home.html template, we first need to establish a templates directory within our myapp application. This directory will house all the templates associated with myapp. We can make this inside the same location where we set up urls.py, but this time we'll create a folder named templates instead of a file. Inside that folder, we’ll add a file called home.html — or whatever name you've decided for the template in your request.


The reason we name it templates is that Django looks for HTML files in a directory by that name. As a starting point, you might want to include a simple tag in home.html:


                        

My first Django Website

9. View the Website

But… can we actually access that website? Yes, we can. Simply return to the terminal; it may still be open. If not, navigate back to the directory where manage.py resides and list the contents. Now, let’s proceed with this command: python manage.py runserver. Django includes a development server that will enable us to view the webpage we’re working on almost instantly. After starting the server, the output should look like this:


If there's a statement about unapplied migrations, you can ignore it for the moment. This will become relevant as soon as you start to create models with Django, which is another tutorial. If there are any bugs that Python detects, it will alert you at this point, and you will need to resolve them before you can run the server to display the webpage. As a developer, you will likely encounter this scenario repeatedly!

To view the webpage, navigate to localhost on port 8000 by typing the following into your browser's address bar: http://127.0.0.1:8000/ (you might recognize this, right?). And what do you see? If all went well, it will be the content you added to the new home.html template!


10. Recap

In this blog entry, we covered several essential steps for setting up your first Django website. We began by establishing the directory structure necessary for our store app, which included creating a templates directory to hold our HTML templates. Next, we installed Django and learned how to create our initial template, home.html, where we added some basic content. We also discussed the importance of routing and how to set up urls.py to direct web traffic to our new template. Finally, we ran the Django development server using the command python manage.py runserver, allowing us to view our work in a web browser. With these steps, you successfully created a functional website with routing capabilities and a simple homepage. Congratulations, you just created your first website! This experience lays a solid foundation for further exploration and development in Django.

Next steps:
  • Learn how to build an email contact form with Django

Blog Posts

Start with Django

If you’ve been curious about web development, starting your journey with Django might just be the right choice for you. As a powerful framework, Django is designed to help developers build web applications more easily and efficiently.
Read more

HTTP requests: A beginner's guide

If you're just starting your web development journey, you've likely come across the term "HTTP requests." But what exactly are they, and why are they so important? Don’t worry; we’re here to break it down in a simple and approachable way!
Read more

Your first Node Server

Node.js is a powerful, open-source JavaScript runtime that allows you to build server-side applications with ease. If you’re looking to get started with web development beyond the client side, setting up your first Node server is a great way to begin.
Read more

Email Contact Form in Django

You’re probably aware that a contact form is a crucial component for many websites. In this tutorial, we will guide you through the process of creating a simple yet functional email contact form using Django.
Read more

Your First Full-Stack App

In this blog post, we'll explore how to set up a modern web application using React for the front end, Vite for a fast development experience, and Node.js for your backend. This powerful combination allows you to build dynamic, responsive applications with ease.
Read more

Routing in Express

In Express, a popular web framework for Node.js, setting up routes allows you to build dynamic, user-friendly applications effortlessly. In this tutorial, we’ll cover the essential concepts of routing in Express, including how to create routes, define route parameters, and handle different HTTP methods.
Read more