How a Flask Website Works
Connecting Front-End, Back-End, and Databases with Python
Front-End (Client Side)
HTML CSS Bootstrap
Structure of the page - text, forms, Styling and layout control - colors, Pre-built responsive design
and images that users see and fonts, spacing, and visual design components like buttons, navbars,
interact with. elements. and grid systems.
Basic JavaScript/jQuery functionality comes built-in with Bootstrap
Interactivity Flow
Accept Input Retrieve from DB
User submits data through forms, clicks, or interactions Flask queries the database for relevant information
CRUD Operations Display Results
Create, Update, Delete data based on user actions Show processed information back to the user
Flask: The Web Framework
• Lightweight and beginner-friendly Python framework
Seamlessly connects Python → Database → Browser
• Highly scalable with extensive third-party libraries
• More flexible and modular than Django
Flask
Lightweight Python web framework
Forms & Input Handling
HTML Forms
Collect user input including text fields, email addresses,
passwords, and file uploads from web pages.
WTForms
Secure, Python-powered form handling in Flask with built-in
validation and CSRF protection.
Database Integration
Database Tools CRUD Operations
SQLite → Lightweight, built into Create
Python
Add new records
SQLAlchemy → ORM (Python
instead of raw SQL)
Flask-Migrate → Manage Read
database schema changes
Retrieve existing data
Update
Modify records
Delete
Remove data
Templates & Output
Jinja2 Templates
Embed Python logic directly inside HTML to render dynamic content like dashboards, search results, and personalized pages.
Python Code Rendered HTML
{% for item in items %} <h3>{{ [Link] }}</h3>
<p>{{ [Link] }}</p>{% endfor %}
Beyond Basics
Authentication & Login REST APIs
User registration, secure login systems, and session Build APIs for mobile apps and third-party integrations
management for protected areas. with JSON responses.
Payment Processing Advanced Extensions
Integrate with Stripe, PayPal, and other payment Flask-Mail, Flask-Admin, Flask-SocketIO for real-time
gateways for e-commerce functionality. features and more.
Summary
Flask = Glue Between Front-End & Back-End
Front-End Back-End
HTML, CSS, Bootstrap for user interface Python + Flask for server logic
Database Templates
SQLite + SQLAlchemy for data management Jinja2 for dynamic content rendering
Flask Server Rendering
Python server logic and routes Jinja2 templates for responses
Design System
Color Palette Typography
Titles → Montserrat Bold
Primary Colors
Body Text → Open Sans Regular
Dark Blue (#1A237E)Purple (#6A1B9A)White (#FFFFFF) Code Snippets → Consolas/Monospace
Accent Colors
Light Blue (#42A5F5)Orange (#FF7043)