Learn Django

Create the Home Page Template

The previous lesson showed how to create the base.html file. This lesson will show how to create the home page template, which extends the base.html file. This template is the advert for the CRM Easy application.

Step 1: Create the Marketing Template Directory

It's useful to organize the template files in the same hierarchy as Django apps are created. If you recall, the home page is being built in the marketing app. Therefore the first step is to create a 'marketing' folder in the templates directory. Follow these steps to do so:

  1. Navigate to /.../crmeasy/crmapp/templates
  2. Create a new folder in that directory named marketing/

The hierarchy should look as follows.

1
2
3
4
crmeasy/  
  |---crmapp/  
    |---templates/  
      |---marketing/  

Step 2: Create the Home.html File

Now it's time to create the home.html file. Follow these steps to do so.

  1. Navigate to /.../crmeasy/crmapp/templates/marketing
  2. Create a file in that folder named home.html and open it for editing

Step 3: Code the Home.html File

Given the length of this file I'm going to break it down into parts. A full version of the file will be shown at the end.

Extending the Base.html File

In this first part you'll learn how to extend the base.html file, and set the value of several blocks.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block nav-style %}mkt-nav{% endblock nav-style %}

{% block content %}  

    {# Hero Section #}  

    {# Main Section #}

{% endblock content %}

Code Review

Line 1: The first block extends the base.html file created in the previous lesson.

Line 2: The second block overrides the default value and sets the title element value to 'Home'. Remember that the {% block title %} tag was created in the base.html file; look back at that file now to get a better idea of what's happening.

Line 3: The third block sets the nav-style value. This is used to add the name of a CSS class to the nav-bar element. If you refer to our site design you'll see that the home page and application have different navigation header styles. This one value is used to apply a class that changes the styling.

Lines 5-11: The last block allows us to enter in the main content of the page, which will be done next. The code shown in parts 2 & 3 below should be entered in between the opening and closing content blocks.

Create the Home Page Hero Text

Now it's time to add the hero text, or banner, to the web page. Locate the {# Hero Section #} comment and add this code below it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
{# Hero Section #}
<div class="mkt-s1">
    <div class="mkt-s1-body container ">
        <div class="row">
            <h1 class="col-md-8">Never Miss Another Opportunity</h1>
        </div>
        <div class="row">
            <p class="col-md-8">A CRM application that lets you track
            all of your customers, meetings, notes,
            and plans. Never forget an important
            contact or follow up task again.</p>
        </div>
        <div class="row">
            {# First Signup Link #}
            <a href=""
               class="sign-up btn btn-success">Sign Up Now for $15/month!
            </a>
        </div>
    </div>
</div>

The Home.html Body

The code below will build out the section of the web page that communicates the three reasons why a customer would purchase the CRM Easy service. Locate the {# Main Section #} comment and add this code below it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{# Main Section #}
<div class="mkt-s2 container">
    <h2 class="mkt-s2-h">Why Buy CRM Easy?</h2>
    <div class="mkt-s2-body">
        <div class="col-md-4 mkt-vp">
            <img class="" src="{{ STATIC_URL }}images/clock.png"/>
            <h5>Save Time</h5>
            <p>By tracking your customers in
            an easy to use application you'll
            be able to find them faster. Don't
            waste time searching email, looking
            at business cards, or looking online -
            just open CRM Easy!</p>
        </div>
        <div class="col-md-4 mkt-vp">
            <img class="" src="{{ STATIC_URL }}images/lightbulb.png"/>
            <h5>Stay Current</h5>
            <p>Keeping track of customer details
            is a critical part of serving the customer
            right. Make sure you know what they want and when
            they want it. Use CRM Easy to track all customer
            communications.</p>
        </div>
        <div class="col-md-4 mkt-vp">
            <img class="" src="{{ STATIC_URL }}images/dollar.png"/>
            <h5>Win Business</h5>
            <p>By tracking customers and staying up
            to date on their requirements you'll be
            in a better position to sell your products
            or services. You win and so does the customer.</p>
        </div>
    </div>
    {# Second Signup Link #}
    <a href="" class=" sgn-btm ">SIGN UP FOR ONLY $15/MONTH</a>
</div>

Step 4: Commit Changes

Execute these commands to commit your changes in Git.

1
2
3
4
5
# add files
(venv)$ git add .

# commit files
(venv)$ git commit -m "created the home page template"

Track your progress with a free account