✨ Introduction
Looking to upgrade your Python skills in 2025? In this tutorial, you’ll learn how to build a complete 📝 To-Do List Web App using Python Flask. It’s a beginner-friendly project that introduces you to backend development, routing, and dynamic rendering using HTML templates.
Whether you’re a 🎓 CS student, 🧠 self-learner, or 👨💻 coding enthusiast, this project is a great addition to your Python Flask projects portfolio.
🧰 What You'll Build:
- ✅ A dynamic To-Do List Web App
- ➕ Add, ❌ delete, and 👁️ view tasks
- 🗃️ Store data in a temporary list (you can later upgrade it to a database)
🧪 Technologies Used:
- 🐍 Python 3
- 🔥 Flask (micro web framework)
- 🎨 HTML & Bootstrap for front-end
📁 Project Structure:
todo-flask/
├── app.py
└── templates/
└── index.html
🛠️ Step 1: Install Flask
pip install Flask
📜 Step 2: app.py
from flask import Flask, render_template, request, redirect
app = Flask(__name__)
tasks = []
@app.route('/')
def home():
return render_template('index.html', tasks=tasks)
@app.route('/add', methods=['POST'])
def add():
task = request.form.get('task')
if task:
tasks.append(task)
return redirect('/')
@app.route('/delete/<int:index>')
def delete(index):
if 0 <= index < len(tasks):
tasks.pop(index)
return redirect('/')
if __name__ == '__main__':
app.run(debug=True)
🧾 Step 3: templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask To-Do App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body class="container mt-5">
<h2 class="text-primary">📝 My To-Do List</h2>
<form action="/add" method="POST" class="mb-4">
<input type="text" name="task" class="form-control" placeholder="Enter a task" required>
<button type="submit" class="btn btn-success mt-2">➕ Add Task</button>
</form>
<ul class="list-group">
{% for task in tasks %}
<li class="list-group-item d-flex justify-content-between">
{{ task }}
<a href="/delete/{{ loop.index0 }}" class="btn btn-danger btn-sm">❌ Delete</a>
</li>
{% endfor %}
</ul>
</body>
</html>
💡 Bonus Ideas:
- 🧩 Use SQLite or SQLAlchemy to save tasks
- ☑️ Add checkboxes for completed tasks
- ⚡ Use AJAX to avoid reloading the page
✅ Conclusion:
You've just built a working 🧾 To-Do List Web App using Python Flask! This is a strong beginner project that demonstrates front-end and back-end interaction. Keep building by adding authentication, saving to a database, and deploying your app online.
📣 Call to Action:
Like this tutorial? 🚀 Share it with your coding friends and bookmark this blog for more “Code & Create” projects every week!
0 Comments