Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Utilize templating to create HTML files for Flask to display for the user.
HTML Head
<meta charset="utf-8">
<title>Pet Adoption</title>
<meta name="description" content="A collection of adoptable pets.">
<meta name="viewport" content="width=device-width, initial-scale=1">
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Templating Documentation
Flask uses Jinja for its templating behavior. Jinja Docs
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So far we have set up a flask
app with a single route.
0:00
When a user navigates to a route,
the app responds with a message.
0:05
Now I think we can all agree,
0:09
a single message doesn't quite
make the greatest website.
0:11
We need to pass in the structure of our
website, which is created using HTML,
0:16
let's delete our current message and
replace it with triple quotes.
0:21
Let's put an h1 for
a header and do Pet Adoption,
0:35
and then we need </h1> to close it.
0:41
And then let's add a button,
0:47
Add Pet, </button> to close it.
0:49
And just to keep this consistent,
I'm gonna tab this over and
0:58
when I save you can see
our console has updated.
1:02
This is what the debugger does.
1:06
Every time we save, it'll automatically
refresh our website, which is pretty nice.
1:08
Now if we pull up our website, and
we navigate away from me out and back
1:14
to our homepage, you can leave it like
this or the slash, both or your homepage.
1:18
And there's our H1 header and
your button, nice work!
1:24
Now we just have to add the rest of
the HTML and when we start a new route or
1:29
page will need to copy over the header
HTML and since that will be on every page.
1:34
This is not going to work long-term.
1:40
Luckily flask has got us covered.
1:42
We're going to add templates.
1:45
Templates are HTML files that flask uses
to create the structure of our website.
1:48
First, we need to add a folder
to our project called templates.
1:54
Flask looks for
a folder named templates specifically.
2:00
And also it's a pattern that most
developers will recognize. When
2:06
they see a folder called templates,
2:10
they'll know what's inside
because of the name.
2:12
Now, inside of this folder, we can
create an HTML file for our homepage.
2:15
It'll be called index.html
2:21
Now we can start building out our HTML.
2:27
Let's create a typical outline.
2:31
Start with <!DOCTYPE html>.
2:33
Then we'll need <html></html>,
inside goes the head,
2:39
and the body.
2:43
In the head, let's add a few things.
2:52
To speed things up I've placed this code
in the teacher's notes below this video,
2:54
copy and
paste it in between the head tags.
2:59
Great, now we can add a section for
our header and a button,
3:15
since our header will also be
a link back to the homepage,
3:19
we'll need to wrap it
inside of an anchor tag.
3:24
And you can just put a pound
symbol in the href for now.
3:29
Then we'll need to put our h1 inside and
Pet Adoption.
3:35
Let's stop here for now,
back in our Python file,
3:40
we'll need to add to our imports
to access render template and.
3:46
Then in our index function,
we can replace this
3:59
string with render template and
pass in index.html.
4:04
This tells the program to go
into the templates folder and
4:11
grab a file called index.html and
4:17
send it to the user as a response save and
4:21
refresh the browser and
we can see our HTML.
4:25
Nice.
4:30
Let's go back to our index.html file and
4:32
create the second section
on our home page.
4:35
The pet cards that hold the pet's name,
age and a brief description.
4:38
We'll start by adding a section.
4:44
Then each card will be
wrapped in an anchor tag so
4:47
that it can be clicked on.
4:53
Again, you can just put
a pound symbol in here and
4:56
then our card is going to be a div.
5:02
And inside of our div,
we're going to do an h2
5:05
header with the pet's name followed
by a paragraph tag with the age and
5:11
then another with the description.
5:18
And you can enter some fake lorem ipsum
for the description as placeholder text.
5:27
You can copy it from
the teacher's notes below.
5:33
Save your work,
refresh the browser and awesome work.
5:48
You've now created the basic structure for
the homepage screen.
5:55
When working with the backend of
a website like we are with flask, you may
5:59
be given the front end elements, the HTML,
CSS and JavaScript by another developer.
6:04
In this situation, you would incorporate
their work into your flask app.
6:11
Other times, you may be in
charge of both the front end and
6:16
back end development work.
6:19
This is called being
a full stack developer.
6:22
Moving forward, I will give you
the rest of the HTML, CSS, and
6:25
JavaScript so you can focus on Flask.
6:30
If you're working locally you will
need to download the project files and
6:34
the teacher's note below this video.
6:37
Let's get ready to receive
our front end files by adding
6:40
a folder called static to our directory.
6:45
This is another typical pattern for
6:49
the name of the folder that
contains CSS and JavaScript files.
6:52
We'll get into this more in
the next video. Onwards, Pythonistas!
6:56
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up