How to create a website with Python Flask

5 min readSep 20, 2021

About Flask

Flask is a famous python web framework. Another popular framework is Django. If you are very new to web, you should choose Flask because it is easier and simple than Django. But Django is good for larger and complex web application.

Before Flask

Before Flask, you should know about basic python and frontend web development HTML, CSS

6 steps to create Basic Flask App

Create Basic Flask route
Run Flask
Flask Config
Rendering Template
Redirect and Url For
Static Files
Build with me

1. Create Basic Flask route

create folder
create main.py

create a folder and create main.py

from flask import Flaskapp = Flask(__name__)# creating route
@app.route("/")
def home():
    return "This is Home Page"if __name__ == "__main__":
    app.run(debug=True)

import Flask class from flask
Flask parameter should be a module name. and we pass __name__
__name__ is special variable. you can test print(__name__) and it will print __main__. __main__ means you run directly the file or if you get module name, you imported another file.
@app.route(“/”) is decorator function that return home function
“/” means “http://127.0.0.1:5000/” and “/test” means “http://127.0.0.1:5000/test”
return test will print on the “/” route. That’s why Hello, World! print on http://127.0.0.1:5000/
the last if statement is that if you run directly file, run the application.
debug=True means if there is an error, error will be shown on page.

2. Run Flask

run main.py
go to http://127.0.0.1:5000/

python main.py

try this route http://127.0.0.1:5000/about. you will see

Not Found Error. Because we didn’t create (“/about”) route in flask app. We only create (“/”) home route that show This is Home Page.

3. Flask Config

We can set different config values base on sapplication environments. Now we are running development server and change ENV to development.

Route

from flask import Flaskapp = Flask(__name__)
app.config['ENV'] = 'development'@app.route("/")
def home():
    return "This is Home Page"if __name__ == "__main__":
    app.run(debug=True)

4. Rendering Template

After running basic route, we will return html.

from flask import Flaskapp = Flask(__name__)
app.config['ENV'] = 'development'@app.route("/")
def home():
    return "<h1>This is Home Page</h1>"if __name__ == "__main__":
    app.run(debug=True)

Now we return This is Home Page with HTML h1 tags.

Use Jinja Templates instead of returning HTML.

More about Jinja Templates

install Jinja

pip install Jinja2

create templates folder (flask will look for templates in templates folder)
create html files in there

render templates

main.py

from flask import Flask, render_template

app = Flask(__name__)
app.config['ENV'] = 'development'

@app.route("/")
def home():
    return render_template("home.html")

if __name__ == "__main__":
    app.run(debug=True)

home.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>This is home page.</h1>
</body>
</html>

5. Redirect and Url For

In Online Courses website, we already created 4 routes rendering different templates and now we will create download route. In download route, we will redirect (directing to other routes) to courses route (“/courses”) instead of rendering another template.

import redirect and url_for from flask module
add download route to main.py

main.py

from flask import Flask, render_template, redirect, url_for@app.route("/download")
def download():
    return redirect(url_for("courses"))

try this url http://127.0.0.1:5000/download download route and you will see that route redirect to courses route.

6. Static Files

Next step about static files, static files are files and those files interact the same to all templates we rendered. CSS, JS and images are static files. Means that if we rendered home template, css file is passed with home template and if we rendered courses templete, css file is passed with home template to do the same job. Templates will change base on routes, but css, js and images is passed if any template pass to browser.

To add static files

create static folder
add css file in it

styles.css

body{
    background-color: #ee8844;
    color: #fff;
}

connect css link with html

home.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/styles.css">
    <title>Document</title>
</head>
<body>
    <h1>This is home page.</h1>
</body>
</html>

If css file doesn’t work, right click to reload button and hard reload

Build with me

Creating simple free courses website

create home, courses, about and contact html files and style it.

home.html

courses.html

about.html

contact.html

main.py

from flask import Flask, render_template, redirect, url_for

app = Flask(__name__)
app.config['ENV'] = 'development'

@app.route("/")
def home():
    return render_template("home.html")


@app.route("/all_courses")
def courses():
    return render_template("courses.html")


@app.route("/about")
def about():
    return render_template("about.html")


@app.route("/contact")
def contact():
    return render_template("contact.html")


@app.route("/download")
def download():
    return redirect(url_for("courses"))


if __name__ == "__main__":
    app.run(debug=True)