Django Tutorial for Beginners [Step by Step] – Part 2: Django Template

Hello, fellow developers!

Welcome to Part 2 of our tutorial series. In this section, we’ll dive into templates in Django, review some basic HTML, and create a simple home page for our website.

Last updated: May 14, 2025

Prerequisites

  • Knowledge of creating a basic Django project
  • Knowledge of Django's Model-View-Template (MVT) architectural pattern

Refer to part 1 of this tutorial series to get a basic understanding of the above.

Before jumping into creating template files, it's important to understand the relationship between the backend and frontend of a web application.

Frontend vs. Backend in web development

  • Frontend: This refers to everything visible to the user in the browser, including the layout, buttons, text, images, forms, and interactive elements. The frontend is built using HTML, CSS, and JavaScript, all of which are rendered and managed by the web browser.
  • Backend: This is the server-side of the application where logic, database interactions, and data processing take place. Django being a backend framework handles data storage, business logic, and communication with the database.

When you submit a form or make a request on a website, the data is sent to the server for processing. After that, Django will generate a response, usually in the form of HTML, which is then sent to the frontend for the user to see.

Django's solution for the frontend

While Django primarily handles the backend, it provides a mechanism for rendering the frontend through HTML templates. Templates are files containing dynamic content (HTML, CSS) that Django can render on the server and send to the user's browser to make it easier to display interactive and data-driven pages.

In this part of the tutorial, we'll focus on creating our first home page using Django templates.

Setting Up Django Templates

To start using templates in Django, follow these steps:

1. Create the templates directory

In the root directory of your Django project, create a folder called templates. You can do this by running the following command in your terminal:

mkdir templates

2. Update the settings.py file

Next, we need to configure Django to look for template files in the templates folder you just created. Open the settings.py file located in the main project folder (~/musiclibrary/musiclibrary/settings.py) and locate the TEMPLATES section.

In the DIRS list (the second item in the dictionary), add 'DIRS': ['templates']. The updated TEMPLATES setting should now look like this:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

This tells Django to look for template files in a folder named templates at the root of the project (i.e., in BASE_DIR).

3. Create the home.html template

Now that the templates directory is set up, let’s create an HTML file. Inside the templates folder, create a file called home.html. In the next sections, we’ll cover the basics of HTML and add some content to this file to build our simple homepage.

What is HTML

HTML stands for HyperText Markup Language. HTML technically is not a programming language, but a markup language.

HTML helps you define the overall structure and structure of your web page (frontend), like where the menu, footer, header, and form should be, using something called tags.

For example, you want to build a house. The first step is to build the skeleton and overall shape of the building using cement, concrete, rebar, and so on. In fact, first, you build the overall structure of the building, and then, using paint and plaster to design it. HTML is used to build the structure of any web page you visit.

HTML tags

These are used to define elements on a web page, such as text, images, lists, and links.

Tags come in pairs: an opening tag (<tag>) and a closing tag (</tag>). Some tags are self-closing, like <img /> or <br />. HTML tags serve various purposes like changing text appearance, creating lists, and linking to other pages.

Over time, HTML has evolved, introducing new tags and updating older ones. Some tags are rarely used, like the <meter> tag (for displaying measurements), which is not common in most web designs.

HTML Document Structure

  1. <!DOCTYPE html>: The first line of any HTML document. It declares the document type and version of HTML being used. This tells the browser that the page is written in HTML5.
  2. <html> and </html>: These tags enclose the entire content of the HTML page. All the content and structure of your page should be inside these tags.
  3. <head> and <body>:
    • The <head> tag contains metadata about the page, such as the title and links to external files (like stylesheets or scripts).
    • The <body> tag contains the visible content of the webpage, such as text, images, and links.

4. <title>: This tag, placed inside the <head>, displays the title of the page that appears in the browser tab. It's an essential part of every HTML document that provides a name for your webpage.

These foundational elements form the skeleton of an HTML document, and understanding how they work will allow you to structure your web pages effectively.

<head>
	<title>Home</title>
</head>

Other HTML tags:

  1. <h1> to <h6> tags: These tags represent headers of different levels. The <h1> tag is the most important and is used for the main title of the page. As the number increases (e.g., <h2>, <h3>), the importance of the header decreases. For example, <h1> is the most important heading, while <h3> is less important.
<h1>Music library</h1>  
<h2>Rock music</h2>
<h3>Famous Artist: </h3>
<h4>Jimi Hendrix</h4>
<h4>Chuck berry</h4>
<h4>Eric Clapton</h4>
 <h2>wikipedia: </h2>

2. <p> tag: This tag is used to define a paragraph in HTML. It wraps blocks of text into a structured and readable format.

<body>
    <p>Music library is a place where you can find information about the most beautiful songs from your favorite artists. Enjoy!</p>
</body>

3. <ul> tag: This tag is used to define an unordered list. Inside this list, each list item is defined using the <li> (list item) tag.

<ul>
      <li>Bass guitar</li>
       <li>electric guitar</li>
       <li>Electronic drum</li>
   </ul>

4. <a> tag: The anchor tag is used to create links. It defines hyperlinks that reference other web pages or resources. For example, the <a> tag is used to link to music platforms in the code example.

<a href="https://en.wikipedia.org/wiki/Rock_music">Rock music </a>

5. <img> tag: This tag is used to display images. Unlike most other tags, the <img> tag is self-closing, meaning it does not require a closing tag.

<img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Chuck_Berry_circa_1958.jpg/170px-Chuck_Berry_circa_1958.jpg">

Combining all the HTML codes in a file would look like this:

<!DOCTYPE html>
<html>

   <body>
    <head>
    <title>Home</title>
        {% load static %}
        <link rel="stylesheet" href="{% static 'index.css' %}">
      </head>
      

    <h1>Music library</h1>
    <p>Music library is a place where you can find the information about the most beautiful songs from your favourite artists! enjoy!</p>

    <h2>Rock music</h2>
    
    <p>Rock music is a broad genre of popular music that originated as "rock and roll" in the United States in the late 1940s and early 1950s, developing into a range of different styles in the mid-1960s and later, particularly in the United States and the United Kingdom</p>
    <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Chuck_Berry_circa_1958.jpg/170px-Chuck_Berry_circa_1958.jpg">
     <h3>Famous Artist: </h3>
     <h4>Jimi Hendrix</h4>
     <h4>Chuck berry</h4>
     <h4>Eric Clapton</h4>
     <h2>wikipedia: </h2>
     <a href="https://en.wikipedia.org/wiki/Rock_music">Rock music </a>
 
    <h3>Typical instruments </h3>
    <ul>
        <li>Bass guitar</li>
        <li>electric guitar</li>
        <li>Electronic drum</li>
    </ul>

    <h3>Cultural origins</h3>
    <p>1950s and 1960s, US and UK</p>
   
   </body>
</html>

Rendering Templates in Django

In Django, rendering an HTML template to return to the user is made easy with the render function. This function allows us to take a template and optionally pass it data, which Django then uses to populate the template and create a complete HTML response.

To render a template in Django, follow these steps:

  1. Create a views.py file: By default, the main app (which shares the same name as the project) doesn’t have a views.py file. You can create one manually. Inside this file, you can define a view function that renders the HTML template with this code:
def home(request):
    return render(request,"home.html")

Here, the home view is responsible for returning the home.html template.

2. Define a URL Route: Next, we need to set up a URL pattern to allow users to reach the page rendered by this view. This is done by adding an entry in the urls.py file (“~/musiclibrary/musiclibrary/urls.py”).

URL patterns in the url.py file usually look like this:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('say-hello/', views.hello_world),
    path('', views.home),

In this example:

When you visit the homepage (/), Django will execute the home function. This function will return the rendered home.html template as the HTML response, which the browser will display to the user.

This setup demonstrates the basic workflow for returning HTML templates in Django. The render function allows us to pass data to the templates, which can then be used to dynamically populate content, which makes Django a great framework for building web applications.

Open your project in the local host to see what the project looks like for now on the browser.

If you want to be a better backend developer, learn HTML and CSS, even though they are both considered frontend tools. This is because HTML forms the building block of the web.

This is the end of the Django tutorial part 2. I hope you find it useful.

I’ll see you in the next part. Have fun building!

If you wish to join our community of self-starters learning new skills and creating projects from scratch, join our Discord channel.

Next:

Django Tutorial for Beginners [Step by Step] – Part 3: Virtual Environment and New App.