Hello and welcome to another exciting dive into the world of web development! Today, we’re going to build something really useful and fun: a simple news aggregator. Imagine a personal dashboard where you can see the latest headlines from your favorite (or any specified) websites all in one place. Sounds cool, right?

We’ll be using Flask, a popular Python web framework, which is fantastic for beginners due to its simplicity and flexibility. We’ll also touch upon a technique called “web scraping” to gather the news articles. Don’t worry if these terms sound intimidating; I’ll explain everything step-by-step in simple language.

What is a News Aggregator?

A news aggregator is like your personal news collector. Instead of visiting multiple websites to catch up on the latest headlines, an aggregator fetches information from various sources and presents it to you in a single, consolidated view. This saves you time and keeps you informed efficiently.

Why Flask?

Flask is often called a “microframework” for Python. This means it provides the bare essentials for building web applications without forcing you into specific tools or libraries.
* Simplicity: It’s easy to get started with Flask, making it perfect for beginners. You can build a functional web application with just a few lines of code.
* Flexibility: You can choose the tools and libraries you want for databases, templating, and more.
* Pythonic: If you know Python, you’ll feel right at home with Flask, as it embraces Python’s clear and readable syntax.

What is Web Scraping?

Web scraping is the process of extracting data from websites. Think of it like a digital robot that visits a webpage, reads its content, and pulls out specific pieces of information you’re interested in, such as headlines, article links, or prices.

Important Note on Web Scraping: While powerful, web scraping should always be done responsibly and ethically.
* Check robots.txt: Most websites have a robots.txt file (e.g., https://example.com/robots.txt) which tells web crawlers (like our scraper) which parts of the site they are allowed or not allowed to access. Always respect these rules.
* Terms of Service: Many websites’ terms of service prohibit scraping. Make sure you understand and comply with these.
* Be Polite: Don’t make too many requests too quickly, as this can overload a website’s server. Introduce delays between your requests.
* For this tutorial, we’ll use a hypothetical simple blog structure to demonstrate the concept, avoiding actual commercial sites.

Prerequisites

Before we start building, make sure you have the following installed:

• Python 3: If you don’t have it, download it from the official Python website.
• pip: Python’s package installer. It usually comes bundled with Python.

We’ll install other necessary libraries in the next step.

Setting Up Your Development Environment

It’s good practice to create a virtual environment for your Python projects. A virtual environment is an isolated space for your project’s dependencies, meaning libraries you install for this project won’t interfere with other Python projects on your computer.

1. Create a Project Directory

First, create a new folder for your project:

mkdir news-aggregator
cd news-aggregator

2. Create a Virtual Environment

Inside your news-aggregator folder, run this command:

python3 -m venv venv

This creates a folder named venv inside your project directory, which will hold your isolated Python environment.

3. Activate the Virtual Environment

You need to activate this environment to use it. The command varies slightly based on your operating system:

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

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

4. Install Dependencies

Now, let’s install the libraries we’ll need:

• Flask: For building our web application.
• Requests: To make HTTP requests (fetch webpages).
• BeautifulSoup4 (bs4): For parsing HTML and extracting data easily.

pip install Flask requests beautifulsoup4

pip is Python’s package installer. It allows you to install and manage libraries (also called packages or modules) that other people have written to extend Python’s capabilities.

Building the News Scraper

Let’s create a Python file named app.py in your news-aggregator directory.

Understanding Web Scraping with requests and BeautifulSoup

1. requests: This library allows your Python program to send HTTP requests to websites. An HTTP request is basically asking a web server for a specific page or resource, just like your web browser does. When you type a URL into your browser, it sends an HTTP request and displays the response.
2. BeautifulSoup: Once requests fetches the raw HTML content of a page, BeautifulSoup steps in. It parses (analyzes and breaks down) the HTML document into a tree-like structure, making it very easy to navigate and find specific elements (like all links, paragraphs, or headlines) by their tags, IDs, or classes.

Let’s imagine our hypothetical news website (https://example.com/news) has a very simple structure for its news articles, like this:

<!DOCTYPE html>
<html>
<head>
    <title>Simple News Site</title>
</head>
<body>
    <h1>Latest News</h1>
    <div class="article">
        <h2><a href="/news/article1">Headline 1: Exciting Event!</a></h2>
        <p>A brief summary of the first article...</p>
    </div>
    <div class="article">
        <h2><a href="/news/article2">Headline 2: New Discovery</a></h2>
        <p>Another interesting summary here...</p>
    </div>
    <!-- More articles -->
</body>
</html>

Our goal is to extract the headline text and its corresponding link.

Add the following code to app.py:

import requests
from bs4 import BeautifulSoup

def scrape_news(url):
    """
    Scrapes headlines and links from a given URL.
    This function is designed for a hypothetical simple news site structure.
    """
    try:
        # Send an HTTP GET request to the URL
        response = requests.get(url)
        # Raise an exception for HTTP errors (e.g., 404, 500)
        response.raise_for_status()
    except requests.exceptions.RequestException as e:
        print(f"Error fetching URL {url}: {e}")
        return []

    # Parse the HTML content of the page
    # 'html.parser' is a built-in Python HTML parser
    soup = BeautifulSoup(response.text, 'html.parser')

    news_items = []
    # Find all div elements with the class 'article'
    for article_div in soup.find_all('div', class_='article'):
        # Inside each 'article' div, find the h2 and then the a (link) tag
        headline_tag = article_div.find('h2')
        if headline_tag:
            link_tag = headline_tag.find('a')
            if link_tag and link_tag.get('href'):
                headline = link_tag.get_text(strip=True)
                link = link_tag.get('href')

                # Handle relative URLs (e.g., '/news/article1')
                if not link.startswith(('http://', 'https://')):
                    # Assuming the base URL for relative links is the one scraped
                    base_url = url.split('/')[0] + '//' + url.split('/')[2]
                    link = base_url + link

                news_items.append({'headline': headline, 'link': link})
    return news_items

if __name__ == "__main__":
    # For demonstration, we'll use a placeholder URL.
    # In a real scenario, you'd replace this with an actual news site URL.
    # Remember to check robots.txt and terms of service!
    example_url = "http://www.example.com/news" # Replace with a real (and permissioned) target if testing
    print(f"Scraping news from: {example_url}")
    scraped_data = scrape_news(example_url)
    if scraped_data:
        for item in scraped_data:
            print(f"Headline: {item['headline']}\nLink: {item['link']}\n")
    else:
        print("No news items found or an error occurred.")

In this code:
* We use requests.get(url) to fetch the HTML content.
* BeautifulSoup(response.text, 'html.parser') creates a BeautifulSoup object, which allows us to navigate the HTML.
* soup.find_all('div', class_='article') searches for all div tags that have the CSS class article. This helps us isolate each news entry.
* Inside each article div, we look for the <h2> tag, then the <a> tag within it.
* link_tag.get_text(strip=True) extracts the text content (our headline) from the <a> tag, removing any leading/trailing whitespace.
* link_tag.get('href') extracts the value of the href attribute, which is the URL of the article.
* We also added basic error handling for network issues and a simple check for relative URLs.

Building the Flask Application

Now, let’s integrate our scraper into a Flask application. We’ll modify app.py to include Flask code.

1. Flask Basics

A basic Flask app involves:
* Flask object: The main application instance.
* @app.route() decorator: This tells Flask what URL should trigger our function.
* render_template(): A Flask function to display HTML files.

2. Update app.py

Modify app.py to add Flask functionality:

import requests
from bs4 import BeautifulSoup
from flask import Flask, render_template

app = Flask(__name__) # Create a Flask application instance

def scrape_news(url):
    """
    Scrapes headlines and links from a given URL.
    This function is designed for a hypothetical simple news site structure.
    """
    try:
        response = requests.get(url, timeout=10) # Added a timeout for robustness
        response.raise_for_status()
    except requests.exceptions.RequestException as e:
        print(f"Error fetching URL {url}: {e}")
        return []

    soup = BeautifulSoup(response.text, 'html.parser')
    news_items = []
    for article_div in soup.find_all('div', class_='article'):
        headline_tag = article_div.find('h2')
        if headline_tag:
            link_tag = headline_tag.find('a')
            if link_tag and link_tag.get('href'):
                headline = link_tag.get_text(strip=True)
                link = link_tag.get('href')

                # Handle relative URLs (e.g., '/news/article1')
                if not link.startswith(('http://', 'https://')):
                    base_url_parts = url.split('/')
                    # Reconstruct base URL: scheme://netloc
                    base_url = f"{base_url_parts[0]}//{base_url_parts[2]}"
                    link = base_url + link if not link.startswith('/') else base_url + link

                news_items.append({'headline': headline, 'link': link})
    return news_items

NEWS_SOURCES = [
    {"name": "Example News", "url": "http://www.example.com/news"}
    # Add more sources here, e.g.:
    # {"name": "Tech Blog", "url": "https://techblog.example.com/articles"}
]

@app.route('/') # This defines the route for the home page ('/')
def index():
    all_news = []
    for source in NEWS_SOURCES:
        print(f"Aggregating news from {source['name']} ({source['url']})...")
        scraped_data = scrape_news(source['url'])
        for item in scraped_data:
            item['source'] = source['name'] # Add source name to each item
            all_news.append(item)

    # Sort news by some criteria if needed, for simplicity we'll just return as is

    # Render the 'index.html' template and pass the aggregated news data to it
    return render_template('index.html', news_items=all_news)

if __name__ == '__main__':
    # Run the Flask development server
    # debug=True allows automatic reloading on code changes and provides a debugger
    app.run(debug=True)

Explanation of the new parts:
* from flask import Flask, render_template: We import the necessary components from Flask.
* app = Flask(__name__): This creates an instance of our Flask web application.
* @app.route('/'): This is a decorator that tells Flask to execute the index() function whenever a user visits the root URL (/) of our web application.
* NEWS_SOURCES: A list of dictionaries, where each dictionary represents a news source with its name and URL. We’ll iterate through this list to scrape news from multiple sites.
* render_template('index.html', news_items=all_news): This is where we tell Flask to use an HTML file named index.html as our web page. We also pass our all_news list to this template, so the HTML can display it.

Creating the Frontend (HTML Template)

Flask uses a templating engine called Jinja2. This allows you to write HTML files that can dynamically display data passed from your Python Flask application.

1. Create a templates Folder

Flask expects your HTML template files to be in a specific folder named templates inside your project directory.

mkdir templates

2. Create index.html

Inside the templates folder, create a file named index.html and add the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple News Aggregator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #0056b3;
            text-align: center;
            margin-bottom: 30px;
        }
        .news-item {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .news-item:last-child {
            border-bottom: none;
        }
        .news-item h2 {
            font-size: 1.3em;
            margin-top: 0;
            margin-bottom: 5px;
        }
        .news-item h2 a {
            color: #333;
            text-decoration: none;
        }
        .news-item h2 a:hover {
            color: #0056b3;
            text-decoration: underline;
        }
        .news-source {
            font-size: 0.9em;
            color: #666;
        }
        .no-news {
            text-align: center;
            color: #888;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Latest Headlines</h1>
        {% if news_items %} {# Check if there are any news items #}
            {% for item in news_items %} {# Loop through each news item #}
            <div class="news-item">
                <h2><a href="{{ item.link }}" target="_blank" rel="noopener noreferrer">{{ item.headline }}</a></h2>
                <p class="news-source">Source: {{ item.source }}</p>
            </div>
            {% endfor %}
        {% else %}
            <p class="no-news">No news items to display at the moment. Try again later!</p>
        {% endif %}
    </div>
</body>
</html>

Key Jinja2 parts in the HTML:
* {% if news_items %}: This is a conditional statement. It checks if the news_items variable (which we passed from Flask) contains any data.
* {% for item in news_items %}: This is a loop. It iterates over each item in the news_items list.
* {{ item.link }} and {{ item.headline }}: These are used to display the values of the link and headline keys from the current item dictionary.
* target="_blank" rel="noopener noreferrer": This makes the link open in a new browser tab for a better user experience and security.

Running Your News Aggregator

Now that all the pieces are in place, let’s fire up our application!

1. Ensure your virtual environment is active. If you closed your terminal, navigate back to your news-aggregator directory and activate it again (e.g., source venv/bin/activate on macOS/Linux).

2. Run the Flask application from your project’s root directory:

   bash
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: XXX-XXX-XXX
Aggregating news from Example News (http://www.example.com/news)...

Open your web browser and navigate to http://127.0.0.1:5000. You should see your simple news aggregator displaying the headlines it scraped! If you used the example.com/news placeholder, you might not see any actual news, but if you hypothetically pointed it to a valid site matching the structure, you’d see real data.

Next Steps and Improvements

Congratulations! You’ve successfully built a simple news aggregator with Flask and web scraping. Here are some ideas to take your project further:

• Add More News Sources: Research other websites with simple structures (and appropriate robots.txt and terms of service) and add them to your NEWS_SOURCES list. You might need to adjust the scrape_news function if different sites have different HTML structures.
• Error Handling: Improve error handling for scraping, such as handling cases where specific HTML elements are not found.
• Database Integration: Instead of scraping every time someone visits the page, store the news items in a database (like SQLite, which is easy to use with Flask). You could then schedule the scraping to run periodically in the background.
• User Interface (UI) Enhancements: Improve the look and feel using CSS frameworks like Bootstrap.
• Categorization: Add categories to your news items and allow users to filter by category.
• User Accounts: Allow users to create accounts, save their favorite sources, or mark articles as read.
• Caching: Implement caching to store scraped data temporarily, reducing the load on external websites and speeding up your app.

Conclusion

In this tutorial, we learned how to combine the power of Python, Flask, and web scraping to create a functional news aggregator. You now have a solid foundation for building more complex web applications and interacting with data on the web. Remember to always scrape responsibly and ethically! Happy coding!

Welcome, aspiring web developers! Have you ever wanted to showcase your skills, projects, and connect with others online? A personal portfolio website is an excellent way to do just that. It acts like your digital business card and resume, all rolled into one beautiful package.

In this guide, we’re going to embark on an exciting journey to build a simple portfolio website using Flask. If you’re new to web development or Python, don’t worry! We’ll explain everything in easy-to-understand language, step by step. By the end of this tutorial, you’ll have a foundational understanding of how web applications work with Flask and a basic website to call your own.

What is a Portfolio Website and Why Do You Need One?

Imagine you’re applying for a job or trying to land a freelance project. Instead of just listing your achievements on a piece of paper, what if you could show off your actual work, provide links to your projects, and express your personality? That’s precisely what a portfolio website does. It’s your personal online space where you can:

• Showcase your work: Display your best projects, designs, code, or writing samples.
• Tell your story: Share your journey, skills, and what makes you unique.
• Be accessible: Anyone, anywhere, can find out about you and your work.
• Build your brand: Establish your professional online identity.

Why Choose Flask for Your Portfolio?

There are many ways to build a website, but Flask stands out as a fantastic choice, especially for beginners.

What is Flask?

Flask is a “micro-framework” for building web applications using Python.
* Framework: Think of a framework as a starter kit or a blueprint that provides a structure and common tools to help you build software. Instead of building everything from scratch, a framework gives you a head start.
* Micro-framework: This means Flask is lightweight and provides just the essentials to get a web application up and running. It doesn’t force you into a specific way of doing things, giving you a lot of flexibility. If you need more features (like database tools or user management), you can add them yourself.

Advantages of Flask for Beginners:

• Python-based: If you already know Python, Flask makes web development feel familiar and intuitive.
• Simple to start: You can get a basic web app running with just a few lines of code.
• Flexible: It doesn’t come with many pre-built components, giving you the freedom to choose what you want to use.
• Great for learning: Its simplicity helps you understand the core concepts of web development without getting overwhelmed.

Setting Up Your Development Environment

Before we write any code, we need to set up our workspace.

1. Install Python

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.

2. Create a Project Folder

Let’s create a dedicated folder for our project. You can name it my_portfolio.

3. Set Up a Virtual Environment

A virtual environment is a fantastic tool that creates an isolated space for your Python project.
* Why use it? It prevents conflicts between different projects. For example, if Project A needs an older version of Flask and Project B needs a newer one, a virtual environment ensures they both work without issues.
* How to create it: Open your terminal or command prompt, navigate into your my_portfolio folder, and run:
bash
python -m venv venv
This command creates a new folder named venv inside your project directory, which contains our isolated Python environment.

4. Activate the Virtual Environment

Before installing Flask, you need to “activate” your virtual environment.
* On macOS/Linux:
bash
source venv/bin/activate
* On Windows (Command Prompt):
cmd
venv\Scripts\activate
* On Windows (PowerShell):
powershell
.\venv\Scripts\Activate.ps1
You’ll notice (venv) appearing at the beginning of your terminal prompt, indicating that the virtual environment is active.

5. Install Flask

With your virtual environment active, install Flask using pip (Python’s package installer).

pip install Flask

Our First Flask Application: “Hello, Portfolio!”

Now that everything is set up, let’s create the simplest Flask application.

1. Create app.py

Inside your my_portfolio folder, create a new file named app.py. This will be the main file for our Flask application.

2. Add the Basic Code

Open app.py and paste the following code:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, Portfolio! This is my first Flask website."

if __name__ == '__main__':
    app.run(debug=True) # debug=True allows for auto-reloading on changes

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 tells Flask where to look for resources like templates and static files.
• @app.route('/'): This is a “decorator.” It tells Flask that whenever someone visits the root URL (/) of our website, the home() function should be called.
• def home():: This is a Python function that defines what happens when the home route is accessed.
• return "Hello, Portfolio! ...": This simply sends a text message back to the user’s web browser.
• if __name__ == '__main__':: This is a standard Python idiom. It means the code inside this block will only run when the script is executed directly (not when imported as a module).
• app.run(debug=True): This command starts the Flask development server. debug=True is very helpful during development because it automatically reloads the server when you make changes to your code and provides helpful error messages. Remember to turn debug=False for production!

3. Run Your Application

Save app.py, go back to your terminal (with the virtual environment 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: ...

Open your web browser and go to http://127.0.0.1:5000. You should see “Hello, Portfolio! This is my first Flask website.” Congratulations! You’ve just built your first Flask app.

Introducing Templates: Making Your Website Look Good (HTML)

Right now, our website only shows plain text. Real websites use HTML to structure their content. Flask makes it easy to use HTML files called “templates” to keep your Python code separate from your web page design. Flask uses a templating engine called Jinja2.

1. Create a templates Folder

Inside your my_portfolio directory, create a new folder named templates. Flask automatically looks for HTML files in this folder.

2. Create index.html

Inside the templates folder, create a file named index.html and add the following basic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Portfolio</title>
</head>
<body>
    <h1>Welcome to My Portfolio!</h1>
    <p>This is where I showcase my skills and projects.</p>
    <p>Check back soon for more exciting content.</p>
</body>
</html>

3. Update app.py to Use the Template

We need to tell Flask to render our index.html file instead of just returning text. We’ll use the render_template function.

Modify your app.py like this:

from flask import Flask, render_template # Import render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html') # Use render_template to serve our HTML file

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

Save app.py. Since debug=True is enabled, your server should automatically reload. Refresh your browser at http://127.0.0.1:5000. You should now see the content from your index.html file, formatted by your browser!

Adding Static Files: Styling with CSS

Websites don’t just have HTML; they also have CSS for styling (colors, fonts, layout) and sometimes JavaScript for interactivity. These are called “static files.”

1. Create a static Folder

Just like templates, Flask looks for static files in a special folder. Create a new folder named static inside your my_portfolio directory.

2. Create css Subfolder and style.css

Inside the static folder, create another folder called css. Then, inside the css folder, create a file named style.css.

Add some basic CSS to style.css:

/* static/css/style.css */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

h1 {
    color: #0056b3;
    text-align: center;
}

p {
    margin-bottom: 10px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
    background-color: #333;
    overflow: hidden;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

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

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

3. Link style.css in index.html

Now, we need to tell our index.html to use this stylesheet. Open index.html and add the following line inside the <head> section, usually after the <title> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Portfolio</title>
    <!-- Link to our CSS file -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- ... rest of your body content ... -->

• {{ url_for('static', filename='css/style.css') }}: This is a Jinja2 template function provided by Flask. It dynamically generates the correct URL for our static file. This is better than hardcoding the path because Flask can handle where your static files are located, even if you move them later.

Save index.html. Refresh your browser, and you should now see your “Welcome to My Portfolio!” text styled with the new font, colors, and centered alignment!

Building More Pages: About and Contact

A portfolio usually has more than just a home page. Let’s add an “About” page and a “Contact” page.

1. Create New Templates

Inside your templates folder, create two new files: about.html and contact.html.

about.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me - My Awesome Portfolio</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <nav>
        <ul>
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('about') }}">About</a></li>
            <li><a href="{{ url_for('contact') }}">Contact</a></li>
        </ul>
    </nav>
    <h1>About Me</h1>
    <p>Hi, I'm [Your Name]! I'm passionate about [Your Interest/Field].</p>
    <p>I enjoy building things and learning new technologies.</p>
    <p>Feel free to explore my projects!</p>
</body>
</html>

contact.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Me - My Awesome Portfolio</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <nav>
        <ul>
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('about') }}">About</a></li>
            <li><a href="{{ url_for('contact') }}">Contact</a></li>
        </ul>
    </nav>
    <h1>Contact Me</h1>
    <p>Have a project in mind or just want to say hello?</p>
    <p>You can reach me at: <a href="mailto:your.email@example.com">your.email@example.com</a></p>
    <p>Find me on LinkedIn: <a href="https://linkedin.com/in/yourprofile" target="_blank">Your LinkedIn</a></p>
</body>
</html>

Notice we’ve added a basic navigation bar (<nav>) to these pages, using {{ url_for('home') }}, {{ url_for('about') }}, and {{ url_for('contact') }} to link to our Flask routes.

2. Update app.py with New Routes

Now we need to create the corresponding routes in our app.py file.

from flask import Flask, render_template

app = Flask(__name__)

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

@app.route('/about') # New route for the about page
def about():
    return render_template('about.html')

@app.route('/contact') # New route for the contact page
def contact():
    return render_template('contact.html')

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

3. Add Navigation to index.html

To make it easy to navigate our site, let’s add the same navigation bar to our index.html as well.

Modify 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 Awesome Portfolio</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <nav>
        <ul>
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('about') }}">About</a></li>
            <li><a href="{{ url_for('contact') }}">Contact</a></li>
        </ul>
    </nav>
    <h1>Welcome to My Portfolio!</h1>
    <p>This is where I showcase my skills and projects.</p>
    <p>Check back soon for more exciting content.</p>
</body>
</html>

Save all your files. Your server should reload automatically. Now, refresh your browser at http://127.0.0.1:5000 and use the navigation links to explore your new pages!

Your Project Structure So Far

Here’s how your my_portfolio project folder should look:

my_portfolio/
├── venv/                 # Your virtual environment (ignore this folder)
├── app.py                # Main Flask application file
├── templates/
│   ├── index.html        # Home page HTML
│   ├── about.html        # About page HTML
│   └── contact.html      # Contact page HTML
└── static/
    └── css/
        └── style.css     # Our main stylesheet
    └── img/              # (Optional) For images like a profile picture

Next Steps and Taking Your Portfolio Further

Congratulations! You’ve successfully built a simple, multi-page portfolio website with Flask. This is just the beginning. Here are some ideas to expand your project:

• Add more content: Fill your “About” page with your actual bio, skills, and experience. Create a “Projects” page to showcase your work with descriptions and links.
• Images: Add a profile picture or project screenshots to your static/img folder and display them in your HTML using the <img> tag. Remember to use {{ url_for('static', filename='img/your-image.jpg') }} for the src attribute.
• Forms: Implement a contact form using Flask-WTF to allow visitors to send you messages directly.
• Database: For more complex features like a blog or dynamic project listings, integrate a database like SQLite and use an ORM (Object-Relational Mapper) like SQLAlchemy.
• Deployment: Once your website is ready, you’ll want to make it live for the world to see! Look into services like Heroku, Render, Vercel, or DigitalOcean to deploy your Flask application.

Conclusion

Building a portfolio website with Flask is an excellent way to learn web development fundamentals. You’ve learned how to set up a Flask application, create routes, use HTML templates, and incorporate CSS for styling. Flask’s simplicity and Python’s power make it an enjoyable framework for beginners and experienced developers alike. Keep experimenting, keep building, and soon you’ll have a fantastic online presence that truly represents you!