Python Computer Science
Beginner
80 mins
Teacher/Student led
+50 XP
What you need:
Chromebook/Laptop/PC

Templates in Flask

In this lesson, you'll explore how to use templates in Flask to build dynamic web pages. Follow step-by-step instructions to set up a project, create a Flask app, and render HTML templates with variables and loops for dynamic content.
Learning Goals Learning Outcomes Teacher Notes

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    1 - Introduction

    In this lesson, you'll learn how to use templates in Flask to create dynamic HTML pages. Templates allow you to separate your Python code from the HTML structure, making your web apps more organised and easier to maintain. You'll build on your knowledge from the previous lesson by adding templates to a Flask application. Here's what you'll do:

    1. Set up a new project folder and environment for this lesson.
    2. Create a basic Flask app.
    3. Introduce Jinja2 templates for rendering dynamic content.
    4. Pass data from Python to HTML templates.
    5. Use template features like variables and loops for dynamic HTML.

    By the end, you'll understand how to generate dynamic web pages using Flask templates.

    2 - Create a Project Folder

    To start, create a dedicated folder for this lesson's project. This will keep your files organised.

    1. On your computer, create a new folder named 'FlaskTemplates'. You can place it in your Documents folder or any preferred location.
    2. Open VS Code and go to File > Open Folder, then select the 'FlaskTemplates' folder.
    3. This sets 'FlaskTemplates' as your workspace for this lesson.

    With your project folder ready, you're set to create a terminal in the next step.


    3 - Create the Environment

    Create a virtual environment to isolate your project's dependencies.

    1. Open the Command Palette: View > Command Palette.
    2. Type 'Python: Create Environment' and select it.
    3. Choose 'Venv' as the type.
    4. Select your installed Python version.
    5. VS Code will create a '.venv' folder in 'FlaskTemplates'.

    4 - Create a New Terminal and Install Flask

    Now, open a terminal in VS Code to run commands for setting up your environment.

    1. Go to the menu: View > Terminal.
    2. This opens the Terminal panel at the bottom of VS Code.
    3. In the terminal, run: pip install flask
    4. Wait for the installation to complete.

    5 - Creating a Basic Flask App

    Let's create a simple Flask app that we will build upon as we go through the lesson.

    In VS Code, create a file named 'app.py' in 'FlaskTemplates'.

    Add the following code:

    from flask import Flask
    app = Flask(__name__)
    
    @app.route('/')
    def home():
        return 'Welcome to Flask Templates Lesson!'

    Save the file.
    Run python -m flask run in the terminal.
    Visit http://127.0.0.1:5000/ in your browser to see the message.
    Stop the server with Ctrl+C.



    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    Copyright Notice
    This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more