This device is not compatible.


Build an E-Learning Website Using Flask

In this project, we’ll build an e-learning course catalog website with a built-in search functionality. We’ll develop the web application with the Flask framework and the SQLAlchemy database. In the end, we’ll have a fully functional e-learning website built on Flask.

Build an E-Learning Website Using Flask

You will learn to:

Apply the fundamentals of Flask

Create and use the database using SQLAlchemy

Write dynamic HTML with Bootstrap

Use Model-View-Controller (MVC) architecture

Configure routes, models, views, and controllers

Bind the SQLAlchemy with Flask


Web Frameworks


Web Development


Intermediate knowledge of Flask and templates

Basic understanding of Python 3

Basic understanding of SQLAlchemy

Basic understanding of MVC patterns





Project Description

In this Flask project, we’ll develop an e-learning course catalog website to display the list of all courses on the website. Each course will have the following:

  • A title
  • An image
  • An author
  • A description
  • A “Visit Website” button

The website will also allow users to search the available courses with a search bar.

The figure below shows a preview of the website’s final layout:

An interface of the project

We will build this project step-by-step. We’ll begin by implementing the course catalog. Next, we’ll fetch the data from seeds into the SQLAlchemy database, and then load it into active records.

Once the layout is designed, we’ll add the search functionality to our web application. When a user searches the name of a course, our application will search the keyword in all existing course titles and display the relevant courses.

Project Tasks


Create Course Listings

Task 0: Get Started

Task 1: Configure Database

Task 2: Create a Database

Task 3: Create a Course Model

Task 4: Load Data from the `.json` File

Task 5: Create a Base View

Task 6: Create a Course View

Task 7: Add the Course Routes


Create a Search Bar

Task 8: Add a Search Bar

Task 9: Add a Search Controller