Web Development with Flask: Building a Simple Website

Hello, young coder! Have you ever wondered how websites are made? Let’s learn how to make a simple website using Flask, a friendly Python tool. Flask is like a magic box that helps us create websites quickly and easily.

What is Flask?

Flask is like a toy building set for making websites. Imagine it gives you blocks (tools) to design your website. It’s light and simple but powerful enough to build big and exciting sites.

Setting Up Flask

1. Install Flask

First, you need to install Flask. Open your Python terminal (or command prompt) and type:

pip install flask

This command tells your computer to get Flask ready for you.

Creating Your First Flask App

Step 1: Create a Project Folder

Make a folder called my_flask_website. Inside this folder, create a file named app.py.

Step 2: Write Your First Code

Open app.py and type this:

from flask import Flask

app = Flask(__name__)  # Create your Flask app

@app.route("/")  # Define the home page
def home():
    return "<h1>Welcome to My Website!</h1>"  # What to show on the home page

if __name__ == "__main__":
    app.run(debug=True)  # Run the app

How It Works

Flask: This starts your website.
@app.route("/"): This says, “When someone visits the main page (/), show them something.”
return: This tells the browser what to display, like a greeting.
app.run(debug=True): This runs your website and helps you find problems easily.

Running Your Website

Go to your project folder, open the terminal, and type:

python app.py

Your terminal will show something like this:

Running on http://127.0.0.1:5000/

Open your browser and go to http://127.0.0.1:5000/. Ta-da! Your website says, “Welcome to My Website!”

Adding More Pages

Let’s make a new page called “About Me.”

Add this to your app.py:

@app.route("/about")  # Define the about page
def about():
    return "<h1>About Me</h1><p>This is a page about me!</p>"

Run your app again. Now, visit http://127.0.0.1:5000/about. You’ll see your “About Me” page.

Adding HTML Templates

HTML makes websites look pretty. Let’s use it to design our pages.

Step 1: Create a Templates Folder

In your project folder, make a folder called templates. Inside it, create a file named index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This site is made with Flask.</p>
</body>
</html>

Step 2: Update `app.py`

Change your home page code to use the HTML file:

from flask import Flask, render_template

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

Now your site looks even better!

Practice Questions

Question 1: Add a “Contact Me” Page

Create a page at /contact that says:

<h1>Contact Me</h1>
<p>Email: [email protected]</p>

Question 2: Use an HTML Template for “About Me”

Make a file called about.html inside the templates folder. Use this content:

<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
</head>
<body>
    <h1>About Me</h1>
    <p>This is a page about me!</p>
</body>
</html>

Update your app.py to use this template for /about.

Solution 1: Add a “Contact Me” Page

In app.py:

@app.route("/contact")
def contact():
    return "<h1>Contact Me</h1><p>Email: [email protected]</p>"

Solution 2: Use an HTML Template for “About Me”

Create the about.html file and update your code in app.py:

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

What’s Next?

Learn Flask Forms: Collect user input like names or feedback.
Explore Flask Databases: Save information like high scores or user profiles.
Add CSS: Style your website to make it look awesome.

Flask makes website building fun and easy. Keep experimenting, and soon, you’ll be making amazing websites! 🎉