Chapter 3: Homepage- Django 3...2...1...Takeoff! Series
Tags: django, python, webdev, tutorial
Published: 2020-09-14 22:36:36

Let’s create a home page for our site, so that users can navigate from there to other pages and vice versa.

Open the urls.py file from your project 


![Screen Shot 2020-09-14 at 6.26.27 PM](https://dev-to-uploads.s3.amazonaws.com/i/naw9h067mig50wxeufv3.png)
 

We need to include the URLs from the app that we created in order to be found by the main urls.py file which sits in our project folder. We do this every time that we create a new app.

![Screen Shot 2020-09-14 at 6.27.08 PM](https://dev-to-uploads.s3.amazonaws.com/i/h8veb0me0umt8uqoak5w.png)
 
**from django.urls import path**

This module helps Django look for the variable urlpatterns which points to different paths in the website.

**from django.urls import include**

Django uses this module to include URLs from different apps inside the project. 

Now we need to create a urls.py file in the directory of your app (listings) that will match the path set in the urls.py of the project. 

The screenshot below shows how your app’s directory should look after you create the new urls.py file.

![j](https://dev-to-uploads.s3.amazonaws.com/i/ftnzgz6nsgpihtt7o03k.png)

The following steps will repeat every time we want to create a new page with a few exceptions. 

**Homepage URL Path**

Open urls.py from your app’s folder and add the following code. This is the path for the homepage.

![Screen Shot 2020-09-14 at 6.27.52 PM](https://dev-to-uploads.s3.amazonaws.com/i/k279u4jarzx3a9sk0ix8.png)
  
**from .import views**

This module imports the views from your app’s directory. We need this module because Django maps the URLs to the views and calls the functions in views.py. 
In this particular case, the empty string (‘’) matches the base URL for the project. This is going to be our homepage. Django will call the index view. That is the reason why we have views.index to specify which view we want to call. On the other hand, name= ‘index’, is just a way to reference the URL pattern without having to write the entire URL, so instead we can just use the name ‘index’ to refer to the entire URL.

**app_name**

We already have multiple urls.py files; one for our project and one for our app. We will have another one for another app that we will create, so app_name helps Django identify and choose the correct urls.py file from other urls.py files in your project’s directory.

**Homepage View**

After you create the URL for a specific page, a view for the page also needs to be created.

Open views.py in your app’s directory. Let’s add the following code to create the view for the homepage.

![Screen Shot 2020-09-14 at 6.29.37 PM](https://dev-to-uploads.s3.amazonaws.com/i/3xhzycb8sqoyron3af5d.png)
 
**from django.shortcuts import render**

This module is used to call different helper functions. We used it here to call render which helps generate a response that we can render in a template.

**Homepage Template**

After we have rendered the request into a template, we need to create such template, so that users can see the data being displayed. In Django, these templates are HTML files which display data provided by views.

First, let’s create a folder called templates inside your app’s directory and then inside the templates folder create a folder with the name of your app (listings). This helps Django interpret and find the templates for your app without any ambiguity. Inside that last folder created, let’s create a file named index.html. Your app’s main folder should look like the image below.

![kj](https://dev-to-uploads.s3.amazonaws.com/i/j6o3a0lksgwzhggvqli0.png)

Open index.html and add the following code.

![Screen Shot 2020-09-14 at 6.16.53 PM](https://dev-to-uploads.s3.amazonaws.com/i/wc2d22l4j2oe595mrxsb.png)
 
It might be a good idea to get familiar with HTML in order to understand the templates as we go along. For this one, there’s not much going on; just a header and a paragraph. For now, we’ll keep the templates like this, but later on, we will start styling them using bootstrap. 

Let’s try to get the functionality of our website working first, and then we can start making it look pretty. Run python manage.py runserver and go to http://127.0.0.1:8000/ to see the homepage of your site. 

![k](https://dev-to-uploads.s3.amazonaws.com/i/w4pdnwrwm3xw7k8mg298.png)
 
If you're enjoying the series and want to support, you can find the entire book below.

[*Django 3…2…1…Takeoff! Kindle*
](https://www.amazon.com/Django-Takeoff-Quick-Learning-Development/dp/B08HB1CWHW/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)

[*Django 3…2…1…Takeoff! Paperback*
](https://www.amazon.com/Django-Takeoff-Quick-Learning-Development/dp/B08HB1CWHW/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)