Category: Python

Have you ever wanted to build your own website or web app but felt overwhelmed by where to start? If you know a bit of Python, you’re already halfway there! Flask is a simple, beginner-friendly tool that lets you create a Python web app with Flask quickly and easily. In this tutorial, I’ll walk you through every step to build a basic web app, even if you’re new to web development. We’ll create a small to-do list app, and I’ll explain everything in a way that’s easy to understand.

How to Easily Create a Python Web App with Flask

I remember when I first started coding. The idea of building a web app sounded like something only expert programmers could do. But with Flask, I was amazed at how fast I could get a working app up and running. By the end of this guide, you’ll have a functional to-do list app and the confidence to keep exploring web development. Create a Python Web App with Flask Let’s get started!

What is Flask and Why Use It?

Flask is a lightweight Python framework for building web apps. Unlike bigger frameworks like Django, Flask is simple and flexible, making it perfect for beginners. It gives you just enough tools to Create a Python Web App with Flask without overwhelming you with complex features.

Here’s why Flask is great for beginners:

• Easy to learn: Flask has a small learning curve, so you can focus on coding instead of memorizing rules.
• Flexible: You can customize your app however you want.
• Fast to set up: You can have a basic app running in minutes.
• Great for small projects: Perfect for things like to-do lists, blogs, or personal portfolios.

For example, when I built my first Flask app, I created a simple note-taking tool in just a few hours. It wasn’t fancy, but it felt amazing to see it work in my browser!

What You’ll Need to Get Started

Before we dive into coding, let’s make sure you have everything you need to create a Python web app with Flask. Don’t worry—this setup is straightforward.

Prerequisites

• Basic Python knowledge: You should know how to write simple Python code, like variables and functions.
• A computer with Python installed: Python 3.6 or higher works best. You can download it from python.org.
• A text editor: Use something like VS Code, PyCharm, or even Notepad++.
• An internet connection: To download Flask and other tools.

Setting Up Your Environment

1. Install Python: If you don’t have Python, download and install it from python.org. Check your version by typing python --version in your terminal or command prompt.
2. Create a project folder: Make a new folder (e.g., “TodoApp”) to keep your files organized.
3. Set up a virtual environment: This keeps your project’s files separate from other Python projects. In your terminal, navigate to your project folder and run:

   python -m venv venv

Activate it:

• On Windows: venv\Scripts\activate
• On Mac/Linux: source venv/bin/activate

1. Install Flask: With your virtual environment active, run:

   pip install flask

Now you’re ready to start coding! Let’s build a simple to-do list app where users can add and view tasks.

Step 1: Create Your First Flask App

Let’s write the basic code to get a Flask app running. We’ll start with a simple “Hello, World!” page to make sure everything works.

Writing the Code

Create a new file called app.py in your project folder. Add this code:

from flask import Flask

app = Flask(name)

@app.route(‘/’)
def home():
return ‘Hello, World!’

if name == ‘main‘:
app.run(debug=True)

What’s Happening Here?

• Import Flask: We bring in the Flask library to use its features.
• Create an app: Flask(__name__) sets up your web app.
• Define a route: @app.route('/') tells Flask to show “Hello, World!” when someone visits the main page (/).
• Run the app: app.run(debug=True) starts a local server for testing.

Running Your App

1. Save app.py.
2. In your terminal (with the virtual environment active), run:

   python app.py

3. Open your browser and go to http://127.0.0.1:5000/. You should see “Hello, World!”.

If you see that message, congratulations—you’ve just created a Python web app with Flask! When I first saw my app load in the browser, I couldn’t stop smiling. It’s a small step, but it feels huge!

Step 2: Build the To-Do List App

Now let’s make our app more useful by turning it into a to-do list. Users will be able to add tasks and see them on the page. We’ll use HTML templates and a simple list to store tasks (for now, we’ll keep it in memory, not a database).

Setting Up Templates

Flask uses HTML templates to create the look of your web app. Create a folder called templates in your project folder. Inside it, make a file called index.html:

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        h1 { color: #333; }
        ul { list-style-type: none; padding: 0; }
        li { padding: 10px; background: #f4f4f4; margin: 5px 0; }
        form { margin-top: 20px; }
        input[type="text"] { padding: 5px; width: 200px; }
        input[type="submit"] { padding: 5px 10px; }
    </style>
</head>
<body>
    <h1>My To-Do List</h1>
    <form method="POST" action="/">
        <input type="text" name="task" placeholder="Add a new task" required>
        <input type="submit" value="Add Task">
    </form>
    <ul>
        {% for task in tasks %}
            <li>{{ task }}</li>
        {% endfor %}
    </ul>
</body>
</html>

Updating Your Flask App

Now, update app.py to handle tasks and render the HTML template:

from flask import Flask, render_template, request

app = Flask(__name__)

tasks = []

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        task = request.form.get('task')
        if task:
            tasks.append(task)
    return render_template('index.html', tasks=tasks)

if __name__ == '__main__':
    app.run(debug=True)

What’s New?

• Templates: render_template('index.html', tasks=tasks) sends the task list to the HTML file.
• Form handling: request.form.get('task') grabs the task from the form when the user submits it.
• Task storage: We store tasks in a Python list called tasks. (This resets when the app restarts, but it’s fine for learning.)

Testing Your App

1. Save both files.
2. Run python app.py.
3. Go to http://127.0.0.1:5000/. You should see a form to add tasks and a list of tasks below it. Try adding a task like “Buy groceries” and see it appear!

When I built my first to-do app, I spent hours adding silly tasks like “Feed the cat” and “Learn Flask” just to see them stack up. It’s fun and rewarding to see your app come to life!

Step 3: Add Features to Your App

Let’s make the app even better by adding a way to delete tasks. This will teach you how to handle more user actions.

Update the Template

Modify index.html to add a “Delete” button for each task:

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        h1 { color: #333; }
        ul { list-style-type: none; padding: 0; }
        li { padding: 10px; background: #f4f4f4; margin: 5px 0; display: flex; justify-content: space-between; }
        form { margin-top: 20px; }
        input[type="text"] { padding: 5px; width: 200px; }
        input[type="submit"] { padding: 5px 10px; }
        .delete-btn { background: #ff4444; color: white; border: none; padding: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>My To-Do List</h1>
    <form method="POST" action="/">
        <input type="text" name="task" placeholder="Add a new task" required>
        <input type="submit" value="Add Task">
    </form>
    <ul>
        {% for task in tasks %}
            <li>
                {{ task }}
                <form method="POST" action="/delete">
                    <input type="hidden" name="task" value="{{ task }}">
                    <input type="submit" value="Delete" class="delete-btn">
                </form>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

Update the Flask App

Add a new route in app.py to handle deleting tasks:

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

tasks = []

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        task = request.form.get('task')
        if task:
            tasks.append(task)
    return render_template('index.html', tasks=tasks)

@app.route('/delete', methods=['POST'])
def delete():
    task = request.form.get('task')
    if task in tasks:
        tasks.remove(task)
    return redirect(url_for('home'))

if __name__ == '__main__':
    app.run(debug=True)

What’s Happening?

• New route: /delete handles the delete action.
• Redirect: After deleting a task, redirect(url_for('home')) sends the user back to the main page.
• Delete button: Each task now has a form with a hidden input to identify which task to delete.

Run the app again and try adding and deleting tasks. You’ll see the list update instantly. This is where things start feeling like a real app!

Step 4: Make Your App Look Better

Right now, our app works, but it’s pretty basic. Let’s add some simple CSS to make it look nicer. We already included some styling in index.html, but you can experiment with colours, fonts, or layouts. For example, try changing the background color of the page or making the buttons bigger.

If you want to take it further, you can use a CSS framework like Bootstrap. Just add this to the <head> of index.html:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Then, update your HTML to use Bootstrap classes. This is optional but can make your app look professional with minimal effort.

Step 5: Deploy Your App (Optional)

Want to share your app with the world? You can deploy it to a platform like Heroku or Render. Here’s a quick overview of how to deploy on Render:

1. Sign up at render.com.
2. Create a new web service and connect it to your GitHub repository (push your project to GitHub first).
3. Set the start command to python app.py.
4. Deploy, and Render will give you a URL to access your app online.

When I deployed my first app, it was thrilling to share the link with friends and see them use it. It’s a great way to show off your work!

FAQs

Final thoughts

Congratulations you’ve just learned how to create a Python web app with Flask! From setting up your environment to building a to-do list app, you now have the skills to start your web development journey. The app we built is simple, but it’s a solid foundation. You can add features like user logins, databases, or better styling as you learn more.

My advice? Keep experimenting! Try adding new features like task categories or due dates. The more you play with Flask, the more confident you’ll get. If you get stuck, check out the Flask documentation or ask questions on forums like Stack Overflow.

Now go build something awesome and share it with the world! What’s the next feature you’ll add to your app? Let me know in the comments!