Python Website Demo Tutorial
Build a complete demo web application using Python + Flask, featuring: login, projects, customers, and success stories pages. Each module gets you closer to a real-world site!
Module 1: Setup & Install Flask
pip install flask flask-login
mkdir pywebdemo
cd pywebdemo
touch app.py
mkdir templates static
Module 2: Base Flask App & Page Routing
# app.py
from flask import Flask, render_template, redirect, url_for
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
@app.route('/projects')
def projects():
return render_template('projects.html')
@app.route('/customers')
def customers():
return render_template('customers.html')
@app.route('/stories')
def stories():
return render_template('stories.html')
if __name__ == '__main__':
app.run(debug=True)
Module 3: Basic Page Templates
<!-- templates/home.html -->
<h1>Welcome to Demo Company</h1>
<a href="/login">Login</a> | <a href="/projects">Projects</a> | <a href="/customers">Customers</a> | <a href="/stories">Success Stories</a>
<!-- templates/projects.html -->
<h2>Our Projects</h2>
<ul>
<li>Project A: AI Web Platform</li>
<li>Project B: Mobile Solution</li>
</ul>
<!-- templates/customers.html -->
<h2>Our Customers</h2>
<ul>
<li>Customer Alpha</li>
<li>Customer Beta</li>
</ul>
<!-- templates/stories.html -->
<h2>Success Stories</h2>
<p>Customer Alpha tripled sales with our platform!</p>
<p>Customer Beta expanded globally with our mobile tech.</p>
Module 4: Login Page & User System
# app.py (add)
from flask import request, flash
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
app.secret_key = 'REPLACE_WITH_A_SECRET_KEY'
login_manager = LoginManager()
login_manager.init_app(app)
# Simple Fake User
class User(UserMixin):
def __init__(self, id):
self.id = id
@login_manager.user_loader
def load_user(user_id):
return User(user_id)
# app.py (add route)
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
if request.form['username'] == 'admin' and request.form['password'] == 'password':
user = User('admin')
login_user(user)
return redirect(url_for('home'))
else:
flash('Bad credentials!')
return render_template('login.html')
<!-- templates/login.html -->
<form method="POST">
<label>Username:</label>
<input name="username" type="text"><br>
<label>Password:</label>
<input name="password" type="password"><br>
<button type="submit">Login</button>
</form>
{% with messages = get_flashed_messages() %}
{% if messages %}
<p style="color:red;">{{ messages[0] }}</p>
{% endif %}
{% endwith %}
# app.py (add route)
@app.route('/logout')
@login_required
def logout():
logout_user()
return redirect(url_for('home'))
Module 5: Protected Pages and Navigation
# app.py (protect routes)
@app.route('/admin')
@login_required
def admin():
return "Admin Only Page
"
Module 6: Basic Styling and Navigation Bar
<!-- templates/base.html -->
<nav>
<a href="/">Home</a> |
<a href="/projects">Projects</a> |
<a href="/customers">Customers</a> |
<a href="/stories">Success Stories</a> |
{% if current_user.is_authenticated %}
<a href="/logout">Logout</a>
{% else %}
<a href="/login">Login</a>
{% endif %}
</nav>
<hr>
{% block content %}{% endblock %}
<!-- Usage: in your pages -->
{% extends "base.html" %}
{% block content %}
...page content...
{% endblock %}
/* static/style.css */
body { font-family: Arial, sans-serif; background: #f7faff; }
nav { font-size: 1.2em; margin-bottom: 12px; }
a { color: #00adb5; text-decoration: none; margin-right: 10px; }
hr { margin-bottom: 30px; }
Module 7: Adding Fake Data for Projects & Customers
# app.py
projects_data = [
{"title": "AI Web Platform", "desc": "Cutting-edge machine learning project."},
{"title": "Mobile Solution", "desc": "Cross-platform mobile app."}
]
customers_data = ["Customer Alpha", "Customer Beta"]
@app.route('/projects')
def projects():
return render_template('projects.html', projects=projects_data)
@app.route('/customers')
def customers():
return render_template('customers.html', customers=customers_data)
{% extends "base.html" %}
{% block content %}
<h2>Our Projects</h2>
<ul>
{% for p in projects %}
<li><b>{{ p.title }}</b> — {{ p.desc }}</li>
{% endfor %}
</ul>
{% endblock %}
Module 8: Success Stories Dynamic Content
# app.py
stories_data = [
{"customer": "Alpha", "story": "Tripled sales!"},
{"customer": "Beta", "story": "Expanded globally!"}
]
@app.route('/stories')
def stories():
return render_template('stories.html', stories=stories_data)
{% extends "base.html" %}
{% block content %}
<h2>Success Stories</h2>
<ul>
{% for s in stories %}
<li><b>{{ s.customer }}:</b> {{ s.story }}</li>
{% endfor %}
</ul>
{% endblock %}
Module 9: Flash Messages & User Feedback
# On login fail (see login above)
flash('Bad credentials!')
{% with messages = get_flashed_messages() %}
{% if messages %}
<div style="color:red;">
{% for message in messages %}
{{ message }}<br>
{% endfor %}
</div>
{% endif %}
{% endwith %}
Module 10: Finalizing & Running Your Demo Website
export FLASK_APP=app.py
flask run
- Visit
http://127.0.0.1:5000/in your browser. - Login using admin / password (demo only).
- Explore projects, customers, and stories pages.
- You can expand with databases, forms, and REST APIs later!
This boilerplate gives you a fast way to try out and demo a real Python-based web application!
