Plotly Dash Tutorial: Build a Dashboard From Scratch

In this lecture, we'll set up everything you need for the course. You'll create a project folder, set up a Python virtual environment, and install the key libraries we'll use throughout the course; Dash, Plotly, Pandas, Dash Bootstrap Components, and Dash AG Grid. By the end of this lecture, you'll have a clean, working development environment ready to start building

In this lecture, we'll take a first look at the Olist Brazilian E-Commerce dataset. You'll download the data from Kaggle, understand what each CSV file contains. By the end, you'll understand the structure of the data we'll be using to build the dashboard

In this lecture, you'll learn how layouts work in Dash. We'll cover the basic app layout structure and how to arrange elements on the page using Dash Bootstrap Components' grid system of containers, rows, and columns. By the end, you'll understand how to structure a professional dashboard layout.

In this lecture, we'll configure our Dash app properly. You'll learn how to set up the app instance, load external stylesheets like Bootstrap themes and Bootstrap Icons, and configure the key settings your app needs before we start building. By the end, you'll have a fully configured Dash app ready for layout development.

In this lecture, we'll start building the dashboard's layout. You'll create the main structure of the app using Dash Bootstrap Components; building the containers, rows, and columns that will hold our KPI cards, charts, and tables. By the end, you'll have the skeleton of the dashboard in place, ready to fill with data.

In this lecture, we'll organise our project with a clean, scalable folder structure. You'll see how to separate your app files, components, and data so the project stays maintainable as the dashboard grows. By the end, you'll have a professional project structure that mirrors how real Dash apps are organised.

In this lecture, we'll build the dashboard's top navigation bar. You'll create a professional navbar using Dash Bootstrap Components, add branding and Bootstrap Icons, and style it to look clean and modern. By the end, you'll have a polished navigation bar sitting at the top of your dashboard.

In this lecture, we'll build the dashboard's side navigation bar. You'll create a sidebar using Dash Bootstrap Components, add navigation links with Bootstrap Icons, and style it to sit alongside the main content area. By the end, you'll have a complete sidebar that gives your dashboard a professional, app like feel.

In this lecture, we'll turn our dashboard into a multi-page app. You'll learn how Dash pages work, create additional pages, and connect them to the navigation so users can move between different views of the dashboard. By the end, you'll have a working multi-page structure ready for content.