Building a Simple Web App
Create your first web application using Flask.
Building a Simple Web App is a free Python For Kids lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Python For Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
1
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.
2
Step 1: Setting Up the Project
Create a new folder for your project and initialize a virtual environment:
python -m venv venvActivate the virtual environment and install Flask:
pip install flask# Setting up the project
from flask import Flask
app = Flask(__name__)
print("Project setup complete")3
Step 2: Creating the App Structure
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.
4
Step 3: Defining Routes
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)5
Step 4: Adding Templates
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>6
Step 5: Using render_template
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')7
Step 6: Adding Static Files
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;
}8
Step 7: Running the App
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.
9
10
Common Mistakes When Building Web Apps
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.
11
What Did We Learn?
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.
Frequently asked questions
Is the “Building a Simple Web App” lesson free?
Yes — the full text of “Building a Simple Web App” is free to read here on the web, and the Python For Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Python For Kids course, upgrade to CoddyKit PRO.
What will I learn in “Building a Simple Web App”?
Create your first web application using Flask. You practise Python For Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Python For Kids?
No prior experience is required. Python For Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Building a Simple Web App” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Python For Kids lesson?
Yes. Every Python For Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Basics of Web Frameworks
- Introduction to Flask
- Building a Simple Web App
- Connecting Python to Databases