Locked lesson.

Upgrade

About this lesson

In Django, templates hold the HTML for our webpages. In this lesson, we'll discuss how they work and how to create them.

Exercise files

Download this lesson’s related exercise files.

Template Files.docx
57.3 KB Template Files - Solution.docx
55.6 KB

Quick reference

Template Files

Templates hold the HTML of your web pages. Each web page has its own template file. Your template's directory goes inside of your resume directory.

When to use

Every time you create a web page for your app, you'll need to create a template file for it.

Instructions

Add a directory called templates inside of your resume directory.

Every time you create a web page, create a corresponding template file inside that templates directory.

Hints & tips

  • The templates directory goes inside of your resume directory.
  • Every web page of your app needs a template file.
Login to download
  • 00:04 Okay, in the last video, we created our view for our homepage.
  • 00:08 And we designated this home.html file, but that doesn't actually exist yet.
  • 00:12 That's a template and that's what we want to do in this video.
  • 00:15 So templates hold the actual HTML of our webpages.
  • 00:21 And if you're not familiar, HTML stands for Hypertext Markup Language.
  • 00:25 And you can go to any web page, for instance, we can go to our little starter
  • 00:29 file here, and you can right click and click View page source.
  • 00:32 And when you do, you'll see the actual HTML for that page, right?
  • 00:36 So anytime you create a web page doesn't matter if you're using Django or Ruby
  • 00:41 on Rails or JavaScript or Node or anything else, you always have HTML for that.
  • 00:46 And we keep our HTML for our Django project in template files.
  • 00:50 So that's what we're going to look at now.
  • 00:53 So head back over to sublime, and
  • 00:55 we need to create a directory that's going to hold all of our template files.
  • 00:59 And where we put this as important.
  • 01:01 So this is our project right here,
  • 01:03 we want to put this template directory inside of our resume directory.
  • 01:07 Because this is our resume web app.
  • 01:09 And so all the things we create for
  • 01:11 the resume web app need to be in that resume directory.
  • 01:14 So you can just right click and create a new folder.
  • 01:18 And then down here you can name it.
  • 01:19 So let's just name this templates and then you can hit Enter.
  • 01:23 And if we now click to expand resume the directory we see this templates folder.
  • 01:30 Now if we click on it, nothing happens because there's nothing in it yet.
  • 01:33 So to create a template file we can just right click on templates and
  • 01:38 click New File and then it pops up right here and you can see it's untitled.
  • 01:43 So let's come up here to File and then click Save As, and
  • 01:46 let's name this thing and you'll notice we're still in our templates directory.
  • 01:51 It says it right there.
  • 01:52 So we know we're in the right spot and we can call this anything we want,
  • 01:56 but we want to call this home.html.
  • 01:58 And HTML files all end in .html it's a universal thing.
  • 02:03 So we wannna make sure that's ending in .html.
  • 02:06 So go ahead and click Save and that's it.
  • 02:09 So now, if we click our templates directory, we see this home.html appears.
  • 02:15 And anytime we want to create a new webpage, or a new template,
  • 02:19 we just use that same process.
  • 02:21 We right click here, create New File, it pops up.
  • 02:24 We Save As and then just name it anything you want.
  • 02:27 If we want an about.html page, we would just do that.
  • 02:30 And you can see it pops up right underneath it.
  • 02:32 I'm going to go ahead and close that, and then right click and Delete it.
  • 02:37 So we don't want to mess with an about page yet,
  • 02:39 we don't want to confuse ourselves.
  • 02:41 So we'll probably add that back later but that's how you create template files.
  • 02:45 Now there's nothing in this yet, later on we'll build this out.
  • 02:49 But for now I'm just going to type in, This is my homepage!
  • 02:54 Woohoo right?
  • 02:56 So now to save a file in Django, you can hit Ctrl and
  • 02:59 S at the same time on your keyboard, and that will save it.
  • 03:03 Or you can come up here to File, and then just click Save either way.
  • 03:07 I like to use the, Save the Ctrl S shortcut.
  • 03:11 But either way, it works just fine.
  • 03:13 So we can close this and then open it again to make sure that that was saved and
  • 03:17 it was, so we're good to go.
  • 03:18 So, okay, we've got our view.
  • 03:21 Inside the view, it's designating a home.html template file.
  • 03:26 We've got our home.html template file we just created and we're almost ready to go.
  • 03:31 Now, I said in the last video that building out a webpage is a three step
  • 03:35 process.
  • 03:36 You have to have a view, you have to have a template, and you have to have a URL.
  • 03:40 So we'll look at URLs in the next video.

Lesson notes are only available for subscribers.

Gift this course