Get hands-on experience of Django web development by building a functional web application with user management, search filters, styling, and cloud deployment.

Zero to Hero in Back-end Web Development

This module focuses on learning Django web development through hands-on examples. We will learn to build a web application, step-by-step, including setting up URLs, views, and templates for different web pages. We will also look at various other useful concepts, such as creating and managing user accounts, implementing search filters, uploading images, and using Bootstrap for styling. Additionally, we’ll also cover cloud deployment using AWS (Amazon Web Services) and Heroku. We’ll learn each concept with the help of an executable environment to get hands-on experience. At the end of this module, we will have built a functional web application using Django.

Django Takeoff: Developing Modern Applications

# Homepage view

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

Add the following code in ***views<span>.py*** in the app’s directory to create the view for the *Homepage*.

from django.shortcuts import render

def index(request):
    return render(request, 'listings/index.html')

The module in **line 1** is used to call different helper functions. We use it here to call render (**line 4**) which helps generate a response that we can render in a template. We'll talk about the template in the next section.

# Homepage template

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

First, create a folder called ***templates*** inside the app’s directory, and then inside the ***templates*** folder create a folder with the name of the app (i.e., ***listings***). This helps Django interpreter find the templates for the app without any ambiguity. Create a file named ***index.html*** inside of the last folder created. The app's main folder should look like the image below.

Learn how to complete the Homepage implementation by creating a view and template.

Homepage View and Template

Homepage view