Hello again, world! We are going to continue building the web app from the previous post. This time, we will be talking about templates, HTML and Bootstrap.
In part 1 we built a local web app which has two routes that show some plain text - nothing interesting. Now we are going to implement HTML templates and beautify them with Bootstrap.
Part I → Create and host your first web app with Python and Flask - Part 1
Part II → Create and host your first web app with Python and Flask - Part 2
First of all, what is HTML? According to MDN web docs:
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.
.py files, in order to separate logic and presentation. Handling
.html files separately is essential to scalability.
Side note: in technical terms, the
.pyfiles that handle logic and are not accessible to the user are called backend, and the presentation files (namely
.jsfiles) are called frontend.
Let’s create a folder named
templates inside our
app folder. It is important that you use the name
templates since Flask is looking for that folder name by default. After that, let’s create a file called
home.html. It can have any name you like, but we need the
home.html we will write some stuff to make it look better than plain text. If you want, you can download an extension called “HTML Boilerplate” which will help us build the basic structure of our file.
If you decide to install it, just type html inside the file and select the “html boilerplate” from the list. If you don’t want to install it, you can just copy the code below.
If you are not too familiar with HTML, let’s start with a simpler structure and a bunch of elements to explore:
<body> element represents the content of an HTML document and so there can be only one
<body> in the document. Basically we put everything inside there. You can explore the rest of the elements browsing the linked MDN page.
Now, we need to tell our Python code to look for that html file and show it when the user accesses a certain route. Let’s take a look at our
routes.py file. We should have something like this inside it:
Let’s modify it and leave it like this:
We are adding two lines and modifying one. Remember to save your file (CTRL+S or CMD+S)
from flask import render_templateis saying that we need to import the function
render_templatefrom the flask library.
- By adding
@app.route("/")we are telling the app that both
/routes will do the same.
return render_template("home.html")instead of
return "My first app is running!"forces the app to return our recently created html file instead of some boring plain text. Let’s test it! Remember how? Go to a terminal and type
flask --app my_first_app run
You should now see something like this:
Excellent! Now, for the last part, we are going to beautify it a bit using Bootstrap. You can head directly to the quick start to take a look at its documentation. According to their instructions, we are going to copy and paste a couple of lines into our
We pasted one line inside
<head> and one inside
<body>. Let’s restart our app (CTRL+C in the console and run it again) and we should be able to see something like this:
Do you notice any differences? Take a look at the space between the left border of the page and the text. Also, take a look at the font. Bootstrap is changing some things for us, so we don’t have to deal with the styling. Before closing this article, let’s change some of our code and discuss a bit about Bootstrap:
class="text-center" inside our div element. This should have happened:
The “bold text” should have moved to the center just by adding that small piece of code. According to W3Schools we use Bootstrap because it’s easy to use, it has responsive features, and it’s compatible with several browsers. Bootstrap has predefined classes to help us style and move elements around without the need to write .css files ourselves (I mean, we can still do it, but we can speed up the frontend process by a lot).
Now that you have created your first HTML template, you can create more files and explore Bootstrap classes. You can also take a look at Bootstrap’s examples and see what they do to build those HTML files. If you don’t want to style your HTML files yet, don’t worry, we can continue building a web app and add Bootstrap at the end of the development.