Web Application Designing Using Python

Key Topics

• Learn how to design and layout the web application made with python-DASH.
• Using CSS and Bootstrap in DASH to achieve a responsive design.

Development Summary

Responsive Design for the Dashboard

Creating a user-friendly interface for managing the collected data was important. The team created responsive UI components using HTML, CSS, and Bootstrap framework effectively.

Bootstrap

Bootstrap is one of the most popular CSS frameworks, enabling you to make your website more efficient. It is also useful for implementing responsive design, allowing users to access the website on devices of any size.

Multi-column layout for the responsive design.

Since our dashboard contains many charts, we designed a user-friendly interface with a two-column layout for devices larger than a tablet, which switches to a single column for smaller devices. This responsive design can be implemented using CSS; however, for code efficiency, we import Bootstrap into Python. In the below code, ‘Row’ indicates each row while this ‘Row’ is divided into two columns (’Col’).