Hello there, aspiring web developers! Have you ever wanted to build your own website or web service? Flask is a fantastic place to start. It’s a lightweight and flexible web framework for Python, meaning it provides the tools and structure to help you create web applications easily.

In this blog post, we’re going to dive into Flask and learn about a super useful feature called “Blueprints.” Blueprints help you organize your Flask applications as they grow, keeping your code neat and manageable. Think of them as mini-applications that you can plug into your main Flask app!

What is Flask?

First things first, what exactly is Flask?

Flask is a micro web framework written in Python.
* Web framework: A collection of modules, libraries, and tools that make it easier to build web applications. Instead of writing everything from scratch, frameworks provide common functionalities like handling requests, managing databases, and defining routes.
* Microframework: This means Flask aims to keep the core simple but extensible. It doesn’t force you to use specific tools or libraries for every task. You get to choose what you need, making it very flexible and great for small projects or building specialized services.

Many developers love Flask because it’s easy to learn, simple to set up, and incredibly powerful for both small projects and complex applications when used correctly.

Why Use Blueprints?

Imagine you’re building a house. At first, it’s just one big room. Easy to manage, right? But as you add more rooms – a kitchen, a bedroom, a bathroom – it becomes harder to keep track of everything if it’s all in one giant space. You’d want to separate them, perhaps by building walls or having different sections for different purposes.

This is exactly what happens with web applications. As your Flask application grows, you’ll add more features:
* User authentication (login, logout, registration)
* A blog section
* An admin dashboard
* An API for mobile apps

If you put all the code for these features into a single file, it quickly becomes a tangled mess. This is where Blueprints come to the rescue!

Blueprint: In Flask, a Blueprint is a way to organize a group of related views, templates, static files, and other elements into a reusable and modular component. It’s like having separate, self-contained mini-applications within your main Flask application.

The benefits of using Blueprints are:
* Organization: Keeps your code structured and easy to navigate.
* Modularity: You can develop different parts of your application independently.
* Reusability: Blueprints can be registered multiple times within the same application, or even across different Flask applications.
* Scalability: Makes it easier to add new features without disrupting existing ones.

Setting Up Your Environment

Before we start coding, let’s prepare our workspace. It’s good practice to use a virtual environment for Python projects.

Virtual Environment: A self-contained directory that holds a specific Python interpreter and its associated packages for a particular project. This prevents conflicts between different projects that might require different versions of the same package.

1. Create a project directory:
   Open your terminal or command prompt and create a new folder for your project.

   bash
mkdir flask_blueprint_app
cd flask_blueprint_app

2. Create and activate a virtual environment:

   bash
python3 -m venv venv
   * On Windows:
   bash
.\venv\Scripts\activate
   * On macOS/Linux:
   bash
source venv/bin/activate
   You’ll see (venv) appear in your terminal prompt, indicating that the virtual environment is active.

3. Install Flask:
   Now, with your virtual environment active, install Flask.

   bash
pip install Flask
   pip: Python’s package installer. It allows you to install and manage third-party libraries (packages) that are not part of the Python standard library.

Building a Basic Flask App (Without Blueprints)

To understand why Blueprints are so helpful, let’s first quickly build a simple Flask app without them.

Create a file named app.py in your flask_blueprint_app directory:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "<h1>Welcome to our Simple Flask App!</h1>"

@app.route('/about')
def about():
    return "<h1>About Us</h1><p>We are learning Flask!</p>"

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

To run this application, save the file and then in your terminal (with the virtual environment active):

flask run

You should see output similar to:

 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Open your web browser and go to http://127.0.0.1:5000/ and http://127.0.0.1:5000/about. You’ll see your pages!

This works perfectly for a small app. But imagine if you had 50 different routes (URL endpoints), handling users, products, orders, and more. Your app.py file would become huge and difficult to manage. This is exactly the problem Blueprints solve!

Building Our Modular App with Blueprints

Now, let’s refactor our application using Blueprints. We’ll create separate “sections” for different parts of our app.

Project Structure

First, let’s organize our project directory. This structure promotes modularity.

flask_blueprint_app/
├── venv/
├── app.py
└── blueprints/
    ├── __init__.py
    ├── main/
    │   ├── __init__.py
    │   └── routes.py
    └── auth/
        ├── __init__.py
        └── routes.py

• venv/: Your virtual environment.
• app.py: This will be our main application file, responsible for setting up and registering our blueprints.
• blueprints/: A directory to hold all our blueprints.
  • __init__.py: An empty file that tells Python that blueprints is a package.
  • main/: A blueprint for general public pages (like home, about).
    • __init__.py: Makes main a Python package.
    • routes.py: Contains the actual routes (views) for the main blueprint.
  • auth/: A blueprint for authentication-related pages (like login, logout).
    • __init__.py: Makes auth a Python package.
    • routes.py: Contains the routes for the auth blueprint.

Let’s create these files and folders.

Creating Blueprints

1. Main Blueprint (blueprints/main/routes.py)

This blueprint will handle our public-facing pages like the home page and an about page.

Create the file flask_blueprint_app/blueprints/main/routes.py and add the following:

from flask import Blueprint

main_bp = Blueprint('main', __name__)

@main_bp.route('/')
def home():
    return "<h1>Welcome to our Modular Flask App! (Main Blueprint)</h1>"

@main_bp.route('/about')
def about():
    return "<h1>About This App</h1><p>We are learning Flask Blueprints!</p>"

Blueprint('main', __name__):
* 'main': This is the name of our blueprint. Flask uses this name internally to refer to this specific blueprint.
* __name__: This special Python variable contains the name of the current module. Flask uses it to figure out where the blueprint is defined, which helps it locate associated resources like templates and static files later on.

2. Authentication Blueprint (blueprints/auth/routes.py)

This blueprint will handle pages related to user authentication.

Create the file flask_blueprint_app/blueprints/auth/routes.py and add the following:

from flask import Blueprint

auth_bp = Blueprint('auth', __name__, url_prefix='/auth')

@auth_bp.route('/login')
def login():
    return "<h1>Login Page</h1><p>Please enter your credentials.</p>"

@auth_bp.route('/logout')
def logout():
    return "<h1>Logout Page</h1><p>You have been logged out.</p>"

@auth_bp.route('/register')
def register():
    return "<h1>Register Page</h1><p>Create a new account.</p>"

url_prefix='/auth': This argument is super useful. It tells Flask that all routes defined within auth_bp should automatically have /auth prepended to their URLs. So, @auth_bp.route('/login') becomes accessible at /auth/login. This keeps your URLs clean and organized by feature.

Registering Blueprints in app.py

Now that we have our blueprints defined, we need to tell our main Flask application about them. This is done in app.py.

Update your flask_blueprint_app/app.py file to look like this:

from flask import Flask

from blueprints.main.routes import main_bp
from blueprints.auth.routes import auth_bp

def create_app():
    app = Flask(__name__)

    # Register the blueprints with the main application instance
    # This connects the blueprint's routes and resources to the main app
    app.register_blueprint(main_bp)
    app.register_blueprint(auth_bp)

    return app

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

create_app() function: It’s a common pattern in larger Flask applications to wrap the application creation inside a function. This makes it easier to configure different instances of your app (e.g., for testing or different environments) and avoids issues with circular imports.

app.register_blueprint(main_bp): This is the magic line! It tells your main Flask application instance to include all the routes, error handlers, and other resources defined within main_bp.

Running the Application

Save all your changes. Make sure your virtual environment is active.
From the flask_blueprint_app directory, run your application:

flask run

Now, open your web browser and try these URLs:
* http://127.0.0.1:5000/ (from main_bp)
* http://127.0.0.1:5000/about (from main_bp)
* http://127.0.0.1:5000/auth/login (from auth_bp, notice the /auth prefix!)
* http://127.0.0.1:5000/auth/logout (from auth_bp)
* http://127.0.0.1:5000/auth/register (from auth_bp)

You’ll see that all your routes are working perfectly, but now their code is neatly separated into different blueprint files. How cool is that?

Benefits of Using Blueprints (Recap)

By now, you should have a good grasp of why Blueprints are such a valuable tool in Flask development. Let’s quickly recap the key advantages:

• Clean Organization: Your project structure is clear, and code for different features lives in its own dedicated blueprint. No more monster app.py files!
• Enhanced Modularity: Each blueprint is like a self-contained module. You can develop and test parts of your application in isolation.
• Improved Reusability: If you have a set of features (e.g., a simple user management system) that you want to use in multiple Flask projects, you can package them as a blueprint and simply register it wherever needed.
• Easier Collaboration: When working in a team, different developers can work on different blueprints simultaneously without stepping on each other’s toes as much.
• Scalability: As your application grows in complexity, blueprints make it much easier to add new features or expand existing ones without overhauling the entire application.

Conclusion

Congratulations! You’ve successfully built a simple Flask application and learned how to use Blueprints to make it modular and organized. This is a fundamental concept that will serve you well as you build more complex and robust web applications with Flask.

Remember, starting with good organization principles like Blueprints from the beginning will save you a lot of headaches down the road. Keep experimenting, keep building, and happy coding!

Hello there, aspiring developers! Have you ever wondered how the apps on your phone get their information, like your social media feed, weather updates, or product listings? They don’t just magically have it! Most mobile apps talk to something called an API (Application Programming Interface) that lives on a server somewhere on the internet.

Think of an API as a waiter in a restaurant. You (the mobile app) tell the waiter (the API) what you want from the kitchen (the server’s data). The waiter goes to the kitchen, gets your order, and brings it back to you. You don’t need to know how the kitchen works or where the ingredients come from; you just need to know how to order from the waiter.

In this blog post, we’re going to learn how to build a simple API using a powerful yet beginner-friendly Python tool called Flask. This will be your first step towards making your mobile apps dynamic and connected!

Why a Flask API for Your Mobile App?

Mobile apps often need to:
* Fetch data: Get a list of users, products, or news articles.
* Send data: Create a new post, upload a photo, or submit a form.
* Update data: Edit your profile information.
* Delete data: Remove an item from a list.

A Flask API acts as the bridge for your mobile app to perform all these actions by communicating with a backend server that stores and manages your data.

Why Flask?
Flask is a micro-framework for Python.
* Micro-framework: This means it provides the bare essentials for building web applications and APIs, but not much else. This makes it lightweight and easy to learn, especially for beginners who don’t want to get overwhelmed with too many features right away.
* Python: A very popular and easy-to-read programming language, great for beginners.

Getting Started: Setting Up Your Environment

Before we dive into coding, we need to set up our workspace.

1. Install Python

First things first, make sure you have Python installed on your computer. You can download it from the official Python website: python.org. We recommend Python 3.7 or newer.

To check if Python is installed and see its version, open your terminal or command prompt and type:

python --version

or

python3 --version

2. Create a Virtual Environment

It’s a good practice to use a virtual environment for every new Python project.
* Virtual Environment: Imagine a special, isolated container for your project where you can install specific Python libraries (like Flask) without interfering with other Python projects or your system’s global Python installation. This keeps your projects clean and avoids version conflicts.

To create a virtual environment, navigate to your project folder in the terminal (or create a new folder, e.g., flask-mobile-api) and run:

python -m venv venv

Here, venv is the name of your virtual environment folder. You can choose a different name if you like.

3. Activate Your Virtual Environment

After creating it, you need to “activate” it. This tells your system to use the Python and libraries from this specific environment.

• On macOS/Linux:

  bash
source venv/bin/activate

• On Windows (Command Prompt):

  bash
venv\Scripts\activate

• On Windows (PowerShell):

  powershell
.\venv\Scripts\Activate.ps1

You’ll know it’s active when you see (venv) at the beginning of your terminal prompt.

4. Install Flask

Now that your virtual environment is active, you can install Flask using pip.
* pip: This is Python’s package installer. It’s like an app store for Python libraries; you use it to download and install packages.

pip install Flask

Building Your First Flask API: “Hello, Mobile!”

Let’s create a very basic Flask API that just says “Hello, Mobile App!” when accessed.

Create a file named app.py in your project folder and add the following code:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/')
def hello_mobile():
    """
    This function handles requests to the root URL (e.g., http://127.0.0.1:5000/).
    It returns a JSON object with a greeting message.
    """
    # jsonify helps convert Python dictionaries into JSON responses
    return jsonify({"message": "Hello, Mobile App!"})

if __name__ == '__main__':
    # debug=True allows for automatic reloading when changes are made
    # and provides helpful error messages during development.
    app.run(debug=True)

Let’s break down this code:

• from flask import Flask, jsonify: We import the Flask class (which is the core of our web application) and the jsonify function from the flask library.
  • jsonify: This is a super handy function from Flask that takes Python data (like dictionaries) and automatically converts them into a standard JSON (JavaScript Object Notation) format. JSON is the primary way APIs send and receive data, as it’s easy for both humans and machines to read.
• app = Flask(__name__): This creates an instance of our Flask application. __name__ is a special Python variable that represents the current module’s name.
• @app.route('/'): This is a decorator.
  • Decorator: A decorator is a special function that takes another function and extends its functionality without explicitly modifying it. In Flask, @app.route('/') tells Flask that the function immediately below it (hello_mobile) should be executed whenever a user visits the root URL (/) of our API.
• def hello_mobile():: This is the function that runs when someone accesses the / route.
• return jsonify({"message": "Hello, Mobile App!"}): This is where our API sends back its response. We create a Python dictionary {"message": "Hello, Mobile App!"} and use jsonify to turn it into a JSON response.
• if __name__ == '__main__':: This is a standard Python construct that ensures the code inside it only runs when the script is executed directly (not when imported as a module).
• app.run(debug=True): This starts the Flask development server.
  • debug=True: This is very useful during development because it automatically reloads your server when you make changes to your code and provides a helpful debugger in your browser if errors occur. Never use debug=True in a production environment!

Running Your First API

Save app.py, then go back to your terminal (making sure your virtual environment is still active) and run:

python app.py

You should see output similar to this:

 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: ...

This means your API is running! Open your web browser and go to http://127.0.0.1:5000. You should see:

{"message": "Hello, Mobile App!"}

Congratulations! You’ve just created and run your first Flask API endpoint!

Adding More Functionality: A Simple To-Do List API

Now let’s make our API a bit more useful by creating a simple “To-Do List” where a mobile app can get tasks and add new ones. We’ll use a simple Python list to store our tasks in memory for now.

Update your app.py file to include these new routes:

from flask import Flask, jsonify, request

app = Flask(__name__)

tasks = [
    {"id": 1, "title": "Learn Flask API", "done": False},
    {"id": 2, "title": "Build Mobile App UI", "done": False}
]

@app.route('/tasks', methods=['GET'])
def get_tasks():
    """
    Handles GET requests to /tasks.
    Returns all tasks as a JSON list.
    """
    return jsonify({"tasks": tasks})

@app.route('/tasks', methods=['POST'])
def create_task():
    """
    Handles POST requests to /tasks.
    Expects JSON data with a 'title' for the new task.
    Adds the new task to our list and returns it.
    """
    # Check if the request body is JSON and contains 'title'
    if not request.json or not 'title' in request.json:
        # If not, return an error with HTTP status code 400 (Bad Request)
        return jsonify({"error": "Bad Request: 'title' is required"}), 400

    new_task = {
        "id": tasks[-1]["id"] + 1 if tasks else 1, # Generate a new ID
        "title": request.json['title'],
        "done": False
    }
    tasks.append(new_task)
    # Return the newly created task with HTTP status code 201 (Created)
    return jsonify(new_task), 201

@app.route('/tasks/<int:task_id>', methods=['GET'])
def get_task(task_id):
    """
    Handles GET requests to /tasks/<id>.
    Finds and returns a specific task by its ID.
    """
    task = next((task for task in tasks if task['id'] == task_id), None)
    if task is None:
        return jsonify({"error": "Task not found"}), 404
    return jsonify(task)


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

New Concepts Explained:

• from flask import Flask, jsonify, request: We added request here.
  • request: This object contains all the data sent by the client (your mobile app) in an incoming request, such as form data, JSON payloads, and headers.
• tasks = [...]: This is our simple in-memory list that acts as our temporary “database.” When the server restarts, these tasks will be reset.
• methods=['GET'] and methods=['POST']:
  • HTTP Methods: These are standard ways clients communicate their intent to a server.
    • GET: Used to request or retrieve data from the server (e.g., “get me all tasks”).
    • POST: Used to send data to the server to create a new resource (e.g., “create a new task”).
    • There are also PUT (for updating) and DELETE (for deleting), which you might use in a more complete API.
• request.json: When a mobile app sends data to your API (especially with POST requests), it often sends it in JSON format. request.json automatically parses this JSON data into a Python dictionary.
• return jsonify({"error": "Bad Request: 'title' is required"}), 400:
  • HTTP Status Codes: These are three-digit numbers that servers send back to clients to indicate the status of a request.
    • 200 OK: The request was successful.
    • 201 Created: A new resource was successfully created (common for POST requests).
    • 400 Bad Request: The client sent an invalid request (e.g., missing required data).
    • 404 Not Found: The requested resource could not be found.
    • 500 Internal Server Error: Something went wrong on the server’s side.
      Using appropriate status codes helps mobile apps understand if their request was successful or if they need to do something different.
• @app.route('/tasks/<int:task_id>', methods=['GET']): This demonstrates a dynamic route. The <int:task_id> part means that the URL can include an integer number, which Flask will capture and pass as the task_id argument to the get_task function. For example, http://127.0.0.1:5000/tasks/1 would get the task with ID 1.

Testing Your To-Do List API

With app.py saved and running (if you stopped it, restart it with python app.py):

1. Get All Tasks (GET Request):
   Open http://127.0.0.1:5000/tasks in your browser. You should see:
   json
{
"tasks": [
{
"done": false,
"id": 1,
"title": "Learn Flask API"
},
{
"done": false,
"id": 2,
"title": "Build Mobile App UI"
}
]
}

2. Get a Single Task (GET Request):
   Open http://127.0.0.1:5000/tasks/1 in your browser. You should see:
   json
{
"done": false,
"id": 1,
"title": "Learn Flask API"
}
   If you try http://127.0.0.1:5000/tasks/99, you’ll get a “Task not found” error.

3. Create a New Task (POST Request):
   For POST requests, you can’t just use your browser. You’ll need a tool like:

   • Postman (desktop app)
   • Insomnia (desktop app)
   • curl (command-line tool)
   • A simple Python script

   Using curl in your terminal:
   bash
curl -X POST -H "Content-Type: application/json" -d '{"title": "Buy groceries"}' http://127.0.0.1:5000/tasks
   You should get a response like:
   json
{
"done": false,
"id": 3,
"title": "Buy groceries"
}
   Now, if you go back to http://127.0.0.1:5000/tasks in your browser, you’ll see “Buy groceries” added to your list!

Making Your API Accessible to Mobile Apps (Briefly)

Right now, your API is running on http://127.0.0.1:5000.
* 127.0.0.1: This is a special IP address that always refers to “your own computer.”
* 5000: This is the port number your Flask app is listening on.

This means only your computer can access it. For a mobile app (even one running on an emulator on the same computer), you’d typically need to:

1. Deploy your API to a public server: This involves putting your Flask app on a hosting service (like Heroku, AWS, Google Cloud, PythonAnywhere, etc.) so it has a public IP address or domain name that anyone on the internet can reach.

2. Handle CORS (Cross-Origin Resource Sharing): When your mobile app (e.g., running on localhost:8080 or a device IP) tries to connect to your API (e.g., running on your-api.com), web browsers and some mobile platforms have security features that prevent this “cross-origin” communication by default.

   • CORS: A security mechanism that allows or denies web pages/apps from making requests to a different domain than the one they originated from.
     You’d typically install a Flask extension like Flask-CORS to easily configure which origins (domains) are allowed to access your API. For development, you might allow all origins, but for production, you’d specify your mobile app’s domain.

   bash
pip install Flask-CORS
   Then, in app.py:
   “`python
   from flask import Flask, jsonify, request
   from flask_cors import CORS # Import CORS

   app = Flask(name)
   CORS(app) # Enable CORS for all routes by default

   You can also specify origins: CORS(app, resources={r”/api/*”: {“origins”: “http://localhost:port”}})

   “`
   This is an important step when you start testing your mobile app against your API.

Next Steps

You’ve built a solid foundation! Here are some directions for further learning:

• Databases: Instead of an in-memory list, learn how to connect your Flask API to a real database like SQLite (simple, file-based) or PostgreSQL (more robust for production) using an Object Relational Mapper (ORM) like SQLAlchemy.
• Authentication & Authorization: How do you ensure only authorized users can access or modify certain data? Look into JWT (JSON Web Tokens) for securing your API.
• More HTTP Methods: Implement PUT (update existing tasks) and DELETE (remove tasks).
• Error Handling: Make your API more robust by catching specific errors and returning informative messages.
• Deployment: Learn how to deploy your Flask API to a production server so your mobile app can access it from anywhere.

Conclusion

Creating a Flask API is an incredibly rewarding skill that bridges the gap between your mobile app’s user interface and the powerful backend services that make it tick. We’ve covered the basics from setting up your environment, creating simple routes, handling different HTTP methods, and even briefly touched on crucial considerations like CORS. Keep experimenting, keep building, and soon you’ll be creating complex, data-driven mobile applications!

Are you looking to showcase your awesome coding skills, projects, and experiences to potential employers or collaborators? A personal portfolio website is an incredible tool for doing just that! It’s your digital resume, a dynamic space where you can demonstrate what you’ve built and what you’re capable of.

In this guide, we’re going to walk through how to build a simple, yet effective, portfolio website using Flask and Python. Don’t worry if you’re a beginner; we’ll break down every step with easy-to-understand explanations.

Why a Portfolio? Why Flask?

First things first, why is a portfolio so important?
* Show, Don’t Just Tell: Instead of just listing your skills, a portfolio allows you to show your projects in action.
* Stand Out: It helps you differentiate yourself from other candidates by providing a unique insight into your work ethic and creativity.
* Practice Your Skills: Building your own portfolio is a fantastic way to practice and solidify your web development skills.

Now, why Flask?
Flask is a “micro” web framework written in Python.
* Web Framework: Think of a web framework as a set of tools and guidelines that make building websites much easier. Instead of building everything from scratch, frameworks give you a head start with common functionalities.
* Microframework: “Micro” here means Flask aims to keep the core simple but extensible. It doesn’t force you to use specific tools or libraries for everything, giving you a lot of flexibility. This makes it perfect for beginners because you can learn the essentials without being overwhelmed.
* Python: If you already know Python, Flask lets you leverage that knowledge to build powerful web applications without needing to learn a completely new language for the backend.

Getting Started: Setting Up Your Environment

Before we write any code, we need to set up our development environment. This ensures our project has everything it needs to run smoothly.

1. Install Python

If you don’t have Python installed, head over to the official Python website (python.org) and download the latest version suitable for your operating system. Make sure to check the box that says “Add Python X.X to PATH” during installation if you’re on Windows – this makes it easier to run Python commands from your terminal.

2. Create a Project Folder

It’s good practice to keep your projects organized. Create a new folder for your portfolio. You can name it something like my_portfolio.

mkdir my_portfolio
cd my_portfolio

3. Set Up a Virtual Environment

A virtual environment is like an isolated sandbox for your Python projects. It allows you to install specific versions of libraries (like Flask) for one project without affecting other projects or your main Python installation. This prevents conflicts and keeps your projects clean.

Inside your my_portfolio folder, run the following command:

python -m venv venv

• python -m venv: This tells Python to run the venv module.
• venv: This is the name we’re giving to our virtual environment folder. You can name it anything, but venv is a common convention.

Now, activate your virtual environment:

• On macOS/Linux:
  bash
source venv/bin/activate
• On Windows (Command Prompt):
  bash
venv\Scripts\activate
• On Windows (PowerShell):
  powershell
.\venv\Scripts\Activate.ps1

You’ll know it’s activated because you’ll see (venv) at the beginning of your terminal prompt.

4. Install Flask

With your virtual environment activated, install Flask using pip.
pip is Python’s package installer, used to install and manage libraries.

pip install Flask

Your First Flask Application: “Hello, Portfolio!”

Now that everything is set up, let’s create a very basic Flask application.

Inside your my_portfolio folder, create a new file named app.py.

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    """
    This function handles requests to the root URL ('/').
    It returns a simple message.
    """
    return "<h1>Welcome to My Awesome Portfolio!</h1>"

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

Let’s break down this code:
* from flask import Flask: This line imports the Flask class from the flask library.
* app = Flask(__name__): This creates an instance of the Flask application. __name__ is a special Python variable that represents the name of the current module. Flask uses it to figure out where to look for static files and templates.
* @app.route('/'): This is a decorator. It tells Flask that the home() function should be executed whenever a user navigates to the root URL (/) of your website. This is called a route.
* def home():: This defines a Python function that will be called when the / route is accessed.
* return "<h1>Welcome to My Awesome Portfolio!</h1>": This function returns a string of HTML. Flask sends this string back to the user’s browser, which then displays it.
* if __name__ == '__main__':: This standard Python construct ensures that app.run() is only called when you run app.py directly (not when it’s imported as a module into another script).
* app.run(debug=True): This starts the Flask development server.
* debug=True: This enables debug mode. In debug mode, your server will automatically reload when you make changes to your code, and it will also provide helpful error messages in your browser if something goes wrong. (Remember to turn this off for a production server!)

To run your application, save app.py and go back to your terminal (with your virtual environment activated). Run:

python app.py

You should see output similar to this:

 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: ...

Open your web browser and navigate to http://127.0.0.1:5000 (or http://localhost:5000). You should see “Welcome to My Awesome Portfolio!” displayed. Congratulations, your first Flask app is running!

Structuring Your Portfolio: Templates and Static Files

Returning HTML directly from your Python code (like return "<h1>...") isn’t practical for complex websites. We need a way to keep our HTML, CSS, and images separate. This is where Flask’s templates and static folders come in.

• Templates: These are files (usually .html) that contain the structure and content of your web pages. Flask uses a templating engine called Jinja2 to render them.
• Static Files: These are files that don’t change often, like CSS stylesheets, JavaScript files, and images.

Let’s organize our project:
1. Inside your my_portfolio folder, create two new folders: templates and static.
2. Inside static, create another folder called css.

Your project structure should look like this:

my_portfolio/
├── venv/
├── app.py
├── static/
│   └── css/
│       └── style.css  (we'll create this next)
└── templates/
    └── index.html     (we'll create this next)

1. Create a CSS File (static/css/style.css)

/* static/css/style.css */

body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

h1 {
    color: #0056b3;
}

p {
    margin-bottom: 10px;
}

.container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

nav ul {
    list-style: none;
    padding: 0;
    background: #333;
    overflow: hidden;
    border-radius: 5px;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #555;
}

2. Create an HTML Template (templates/index.html)

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <!-- Link to our CSS file -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/projects">Projects</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>

        <h1>Hello, I'm [Your Name]!</h1>
        <p>Welcome to my personal portfolio. Here you'll find information about me and my exciting projects.</p>

        <h2>About Me</h2>
        <p>I am a passionate [Your Profession/Interest] with a strong interest in [Your Specific Skills/Areas]. I enjoy [Your Hobby/Learning Style].</p>

        <h2>My Projects</h2>
        <p>Here are a few highlights of what I've been working on:</p>
        <ul>
            <li><strong>Project Alpha:</strong> A web application built with Flask for managing tasks.</li>
            <li><strong>Project Beta:</strong> A data analysis script using Python and Pandas.</li>
            <li><strong>Project Gamma:</strong> A small game developed using Pygame.</li>
        </ul>

        <h2>Contact Me</h2>
        <p>Feel free to reach out to me via email at <a href="mailto:your.email@example.com">your.email@example.com</a> or connect with me on <a href="https://linkedin.com/in/yourprofile">LinkedIn</a>.</p>
    </div>
</body>
</html>

Notice this line in the HTML: <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">.
* {{ ... }}: This is Jinja2 templating syntax.
* url_for(): This is a special Flask function that generates a URL for a given function. Here, url_for('static', filename='css/style.css') tells Flask to find the static folder and then locate the css/style.css file within it. This is more robust than hardcoding paths.

3. Update app.py to Render the Template

Now, modify your app.py file to use the index.html template. We’ll also add placeholder routes for other pages.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    """
    Renders the index.html template for the home page.
    """
    return render_template('index.html')

@app.route('/about')
def about():
    return render_template('about.html') # We will create this template later

@app.route('/projects')
def projects():
    return render_template('projects.html') # We will create this template later

@app.route('/contact')
def contact():
    return render_template('contact.html') # We will create this template later

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

• from flask import Flask, render_template: We’ve added render_template to our import.
• render_template('index.html'): This function tells Flask to look inside the templates folder for a file named index.html, process it using Jinja2, and then send the resulting HTML to the user’s browser.

Save app.py. If your Flask server was running in debug mode, it should have automatically reloaded. Refresh your browser at http://127.0.0.1:5000. You should now see your portfolio page with the applied styling!

To make the /about, /projects, and /contact links work, you would create about.html, projects.html, and contact.html files inside your templates folder, similar to how you created index.html. For a simple portfolio, you could even reuse the same basic structure and just change the main content.

What’s Next? Expanding Your Portfolio

You’ve built the foundation! Here are some ideas for how you can expand and improve your portfolio:

• More Pages: Create dedicated pages for each project with detailed descriptions, screenshots, and links to live demos or GitHub repositories.
• Dynamic Content: Learn how to pass data from your Flask application to your templates. For example, you could have a Python list of projects and dynamically display them on your projects page using Jinja2 loops.
• Contact Form: Implement a simple contact form. This would involve handling form submissions in Flask (using request.form) and potentially sending emails.
• Database: For more complex portfolios (e.g., if you want to add a blog or manage projects easily), you could integrate a database like SQLite or PostgreSQL using an Object-Relational Mapper (ORM) like SQLAlchemy.
• Deployment: Once your portfolio is ready, learn how to deploy it to a live server so others can see it! Popular options include Heroku, PythonAnywhere, Vercel, or DigitalOcean.

Conclusion

Building a portfolio with Flask and Python is an excellent way to not only showcase your work but also to deepen your understanding of web development. You’ve learned how to set up your environment, create a basic Flask application, organize your project with templates and static files, and render dynamic content. Keep experimenting, keep building, and soon you’ll have a stunning online presence that truly reflects your skills!