Building a Simple Web App

Now that you’ve learned the basics of Flask, it’s time to build a simple web application. This app will include multiple routes, HTML templates, and some interactivity.

In this lesson, we’ll create a basic web app step by step.

Create a new folder for your project and initialize a virtual environment:

python -m venv venv

Activate the virtual environment and install Flask:

pip install flask

# Setting up the project
from flask import Flask

app = Flask(__name__)
print("Project setup complete")

Create the following folders and files:

• app.py: Main application file.
• templates/: Folder for HTML templates.
• static/: Folder for static files like CSS and images.

In app.py, define routes for the home page and an about page:

# Defining routes
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return '<h1>Welcome to My Web App</h1>'

@app.route('/about')
def about():
    return '<h1>About This App</h1>'

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

Create an HTML file named home.html inside the templates/ folder:

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <h1>Welcome to My Web App</h1>
    <a href="/about">About</a>
</body>
</html>

Update the home and about routes to use the templates:

# Using templates
from flask import render_template

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

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

Create a style.css file inside the static/ folder and link it in home.html:

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

Run your Flask application:

python app.py

Open your browser and navigate to http://127.0.0.1:5000/ to see your web app in action.

Here are some mistakes to avoid:

• Not organizing the app structure (e.g., missing templates/ and static/ folders).
• Hardcoding URLs instead of using url_for().
• Not testing the app in debug mode.

In this lesson, you learned:

• How to set up a Flask project structure.
• How to define routes and use templates.
• How to include static files like CSS in your app.
• How to run your Flask application and view it in a browser.

Great job! Let’s move to the next topic.