Your first template - 30 days of Django

A short introduction to templates

A template is usually just a simple HTML file. You use HTML just as you're used to, and then Django makes it possible to use different tags and blocks to make the templates dynamic. Django uses a template language very similar to twig, ninja and similar. So it's very easy to understand.

The front page template

Let's set up the template for the front page. This will make it easier to understand what's going on. First, create a new folder called "templates" in the "task" app folder, and then a folder called "task" inside the templates folder.

Django automatically tries to find a folder called "templates" in each of the app folders. And the reason why we have a new folder inside there called "task" is to make it easier to separate the apps later (You will understand when we get there).

Next, you can create a file called "frontpage.html" in the last task folder you created. It should look like this:

<div class="frontpage">
    <h1>{{ title }}</h1>

    <p>This is just a hard coded paragraph!</p>
</div>

That wasn't hard?

Most of this is just pure HTML. The only Django thing here is the h1 tag with curly braces inside. This is called a Django tag.

The "title" inside the two curly braces points to the "title" variable we passed in to the render function in the previous part of this series.

Summary

So now you've created your first Django template :-D
In the next part of this series, we will finally test the project and see it in action in a web browser.

Table of contents

• 1. Introduction
• 2. Installation and setup
• 3. How things work
• 4. The first Django app
• 5. Your first view
• 6. Your first template
• 7. Testing our site
• 8. Extending templates
• 9. Your first model
• 10. The admin interface
• 11. Showing contents from the model
• 12. Another app (category)
• 13. Connecting two models
• 14. Show list of categories
• 15. Category detail page