Flask Web Framework Tutorial: Build a Simple Website with Python

Flask is a lightweight web framework for Python. It provides the essentials for building web applications, including URL routing, request handling and template rendering, while leaving many design choices in the developer’s hands. This tutorial covers the basics by creating a small website with a home page, a dynamic route and an HTML template.

Set up a project

Install Python, then create a project directory and a virtual environment. A virtual environment keeps the project’s dependencies separate from other Python applications.

mkdir flask-tutorial


cd flask-tutorial


python -m venv .venv

Activate the environment. On macOS or Linux, run:

source .venv/bin/activate

On Windows, run:

.venv\Scripts\activate

Install Flask with pip:

pip install Flask

Create your first Flask application

Create a file called app.py and add the following code:

from flask import Flask





app = Flask(__name__)








@app.route("/")


def home():


    return "Hello, Flask!"








if __name__ == "__main__":


    app.run()

Flask(__name__) creates the application. The @app.route("/") decorator connects the website’s root URL to the home function. When someone visits that URL, Flask calls the function and returns its response.

Start the development server with:

python app.py

Open the local address shown in the terminal, usually http://127.0.0.1:5000/. Stop the server with Ctrl+C.

Add more routes

Routes can include variable parts. For example, this route greets a visitor using a name in the URL:

@app.route("/hello/<name>")


def hello(name):


    return f"Hello, {name}!"

Visit /hello/Alex to see the result. Flask passes the value from the URL to the function as the name argument.

You can also specify the type of a route variable. This example accepts an integer:

@app.route("/posts/<int:post_id>")


def show_post(post_id):


    return f"Post number {post_id}"

Use HTML templates

Returning HTML directly from Python is fine for a tiny example, but templates make it easier to keep page content separate from application logic. Create a folder called templates, then add a file named home.html:

<!doctype html>


<html lang="en-GB">


<head>


  <meta charset="utf-8">


  <meta name="viewport" content="width=device-width, initial-scale=1">


  <title>Flask Tutorial</title>


</head>


<body>


  <h1>Welcome to Flask</h1>


  <p>This page is rendered from a template.</p>


</body>


</html>

Update app.py to render the template:

from flask import Flask, render_template





app = Flask(__name__)








@app.route("/")


def home():


    return render_template("home.html")








if __name__ == "__main__":


    app.run()

Flask looks for templates in the templates directory. Templates use Jinja, which can insert values and display content conditionally or repeatedly.

For example, pass a value from a route to a template:

@app.route("/hello/<name>")


def hello(name):


    return render_template("hello.html", visitor=name)

Create templates/hello.html:

<h1>Hello, {{ visitor }}!</h1>

Jinja automatically escapes many values rendered inside templates, helping to reduce the risk of HTML injection. Avoid marking untrusted content as safe.

Add static files

CSS, JavaScript and image files belong in a folder named static. For example, create static/style.css and add:

body {


  font-family: sans-serif;


  margin: 2rem;


}

Link to the stylesheet from a template using Flask’s url_for function:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

Handle forms and requests

Flask routes accept GET requests by default. To process a form submission, allow POST requests as well and read the submitted data with request.

Add this route to app.py:

from flask import Flask, render_template, request





app = Flask(__name__)








@app.route("/contact", methods=["GET", "POST"])


def contact():


    if request.method == "POST":


        message = request.form.get("message", "")


        return f"Your message has {len(message)} characters."





    return render_template("contact.html")








if __name__ == "__main__":


    app.run()

Create templates/contact.html:

<form method="post">


  <label for="message">Message</label>


  <textarea id="message" name="message" required></textarea>


  <button type="submit">Send</button>


</form>

This is a basic demonstration. Real forms should validate input and use CSRF protection, often provided by an extension such as Flask-WTF. Avoid displaying user-submitted content without appropriate escaping.

Organise the application

A small project can start with this structure:

flask-tutorial/


├── app.py


├── templates/


│   ├── home.html


│   ├── hello.html


│   └── contact.html


└── static/


    └── style.css

As an application grows, its routes, configuration and data access can be separated into modules. Flask’s application factory pattern and blueprints are useful ways to organise larger projects.

Development and production

Flask’s built-in server is intended for local development, not for serving a live website. Debug mode can reveal detailed information about errors, so it must not be enabled in production. For deployment, use a production-ready WSGI server and follow Flask’s deployment guidance.

Applications that use sessions or other signed data also need a securely managed secret key. Store sensitive configuration outside the source code, such as in environment variables, and do not commit secrets to version control.

Next steps

This tutorial introduced Flask’s core ideas: routes connect URLs to Python functions, templates generate HTML, and request objects provide access to incoming data. From here, useful topics include form validation, database integration, user authentication, automated testing and deployment.