Posted in

How to Build Your First Flask Web App: A Complete Beginner’s Guide

by Akash Pandey•
How to Build Your First Flask Web App: A Complete Beginner’s Guide

In the world of web development, Python has made a big name for itself thanks to its simplicity, readability, and vast ecosystem. One of the most popular micro web frameworks for building web applications in Python is Flask. It’s lightweight, flexible, and perfect for beginners looking to get started with web development.

In this blog, we’ll walk through step-by-step instructions to help you build your first Flask web app — from installation to deployment. Whether you’re a beginner or looking to polish your skills, this guide will provide a practical approach with hands-on examples.

What is Flask?

Flask is a micro web framework written in Python. It is called a “micro” framework because it doesn’t require particular tools or libraries. Flask gives developers full control and flexibility to structure their application the way they want.

Why Use Flask?

  • Lightweight and fast
  • Easy to learn and use
  • Great for prototyping
  • Large community and documentation
  • Supports extensions (ORM, authentication, etc.)

Prerequisites

Before diving in, make sure you have the following:

  • Python 3.x installed
  • pip (Python package installer)
  • A code editor (e.g., VS Code, PyCharm)
  • Basic knowledge of Python and HTML

Step 1: Setting Up Your Environment

Let’s start by setting up a virtual environment for your project:

 Create a project folder
mkdir flask_app
cd flask_app

# Create a virtual environment
python -m venv venv

# Activate the virtual environment
# On Windows:
venv\Scripts\activate
# On macOS/Linux:
source venv/bin/activate

# Install Flask
pip install Flask

🏗️ Step 2: Create a Basic Flask App

Now let’s create a simple Flask application.

Create a file named app.py:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, World! Welcome to your first Flask app."

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

Run your app:

python app.py

Now open your browser and visit http://127.0.0.1:5000/ — you should see “Hello, World!” 😃

Step 3: Adding More Routes

Let’s add a few more pages to@app.route('/about')
def about():
return "This is the About Page."

@app.route('/contact')
def contact():
return "This is the Contact Page."

Now, navigate to /about and /contact to see your new routes.

Step 4: Using HTML Templates

Flask uses Jinja2, a templating engine that allows you to write HTML with dynamic data.

Create a folder named templates/ and add a file home.html:

 templates/home.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Flask Home</title>
</head>
<body>
    <h1>Welcome to My Flask Web App!</h1>
    <p>This is the home page.</p>
</body>
</html>

Modify your route in app.py:

from flask import render_template

@app.route('/')
def home():
    return render_template('home.html')

Step 5: Using Static Files (CSS, JS, Images)

Create a new folder named static/. Inside it, create a CSS file:

 static/style.css */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

Update home.html to include the stylesheet:

"stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

Flask automatically serves static files from the static/ directory.

Step 6: Handling Forms (POST Requests)

Let’s add a simple contact form.

In contact.html:

 templates/contact.html -->
<form method="POST">
    <label>Your Name:</label>
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>

Update app.py:

 flask import request

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    if request.method == 'POST':
        name = request.form['name']
        return f"Hello, {name}! Thanks for contacting us."
    return render_template('contact.html')

Step 7: Project Structure

As your app grows, structure it like this:

flask_app/
│
├── app.py
├── static/
│   └── style.css
├── templates/
│   ├── home.html
│   └── contact.html
└── venv/

Step 8: Error Handling & Debugging

You can handle errors like this:

@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404

Create a 404.html page inside templates/.

Step 9: Deploying Your Flask App

You can deploy your Flask app using platforms like:

  • Render
  • PythonAnywhere
  • Heroku
  • Vercel (via Serverless functions)

For example, on Render:

  1. Push your code to GitHub.
  2. Create a new Web Service on Render.com.
  3. Choose your repo, set the environment to Python, and add app.py as the entry point.

Bonus: Using Flask Extensions

Some useful Flask extensions:

  • Flask-WTF – for form handling
  • Flask-SQLAlchemy – for databases
  • Flask-Login – for user authentication
  • Flask-Migrate – for database migrations

Install with pip install flask-wtf flask-sqlalchemy flask-login flask-migrate.

Final Thoughts

You’ve just built a complete, functional Flask web app from scratch! Flask is incredibly powerful and flexible, and this guide should serve as a solid foundation to build on.

Whether you’re building a personal blog, a portfolio, or a REST API backend, Flask has the tools to help you succeed.

Further Learning

💬 Have questions or want to take this app further with a database or login system? Drop a comment or message — I’d be happy to help you level up your Flask journey!

Post Views: 65