WAI Forward Developer Blog

How to Build a Web App with Python, Flask, HTML, and JS

By: WAI Forward ltd on June 28, 2025

Building a web app with Python, Flask, HTML, and JavaScript is an excellent way to create dynamic, interactive applications. Flask, a lightweight web framework, allows developers to build powerful backend systems, while HTML and JavaScript handle the frontend.

In this guide, we’ll walk through the step-by-step process of creating a simple web app using Flask for the backend and HTML/JavaScript for the frontend.

Why Use Flask for Web Development?

Flask is a micro web framework for Python that is:

Lightweight: Minimal setup with only essential features.
Flexible: Allows developers to choose their own tools and libraries.
Easy to Learn: Simple syntax, making it great for beginners.

Prerequisites

Before we start, ensure you have the following installed:

Python (3.x recommended)
Flask (`pip install flask`)
Basic knowledge of HTML, CSS, and JavaScript

Step 1: Setting Up Your Flask Project

Create a new project folder and navigate into it:

mkdir flask_app
cd flask_app

Inside the folder, create a new Python file app.py and add the following code:

from flask import Flask, render_template

app = Flask(__name__)

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

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

Step 2: Creating the HTML Template

Inside your project folder, create a new directory called templates and add a file named index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Web App</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Welcome to Flask Web App</h1>
    <button onclick="fetchData()">Click Me</button>
    <p id="response"></p>

    <script>
        function fetchData() {
            $.get('/api/data', function(data) {
                $('#response').text(data.message);
            });
        }
    </script>
</body>
</html>

Step 3: Adding a Flask API Route

Modify app.py to include an API route that returns JSON data:

from flask import Flask, render_template, jsonify

app = Flask(__name__)

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

@app.route('/api/data')
def get_data():
    return jsonify({'message': 'Hello from Flask!'})

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

Step 4: Running the Flask App

Start the Flask server by running:

python app.py

Open your browser and go to http://127.0.0.1:5000/ to see the app in action.

Step 5: Styling the Web Page with CSS

Create a static folder inside your project and add a style.css file.

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

Link the CSS file in index.html:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

Step 6: Enhancing with JavaScript Fetch API

Instead of jQuery, we can use the Fetch API:

<script>
    function fetchData() {
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                document.getElementById("response").innerText = data.message;
            });
    }
</script>

Step 7: Deploying the Flask App

To deploy your Flask app, you can use platforms like:

Heroku: Free and easy cloud deployment.
PythonAnywhere: Ideal for hosting Python web apps.
Render: Simple auto-deployment for Flask.

Best Practices for Flask Web Development

Use Flask Blueprints: Organize large applications into modules.
Implement Error Handling: Use `try-except` blocks for API responses.
Secure Your App: Sanitize user input and protect against XSS and CSRF attacks.
Use a Database: Integrate Flask with SQLite, PostgreSQL, or MongoDB for data storage.

FAQs

Is Flask better than Django? Flask is lightweight and flexible, while Django includes more built-in features.
Can I build a full web app with Flask? Yes, Flask supports backend logic, templates, and databases.
How can I add user authentication? Use Flask-Login for authentication and Flask-WTF for form validation.
Can I use React or Vue.js with Flask? Yes, Flask can serve as the backend API for modern JavaScript frameworks.
What hosting service should I use? Platforms like Heroku, AWS, and DigitalOcean support Flask deployment.

Conclusion

Building a web app with Flask, HTML, and JavaScript is a great way to create interactive web applications. With just a few lines of code, you can set up a backend, create an API, and connect it to a frontend. As you progress, consider adding a database, authentication, and more advanced features.

Start experimenting today and bring your ideas to life with Flask!

Back to Blog