Portfolio

Building a Simple Portfolio Web Application Using Python and Flask

Creating a portfolio web application is a great way to showcase your work and skills to potential employers or clients. In this project, we’ll use Python and Flask to create a basic portfolio web application.

Table of Contents

Objective

To develop a simple portfolio web application that includes an About Me page, a Projects page, and a Contact page.

Requirements

Packages Needed

  • Flask

Steps

Step 1: Setup the Environment

First, install Flask using pip:

Bash
pip install Flask

Step 2: Create the Directory Structure

Create a new directory for the project and add the following folders and files:

  • templates/: For HTML files
  • index.html
  • projects.html
  • contact.html
  • app.py: Main Python script for Flask

Step 3: Create Basic HTML Templates

In the templates/ folder, create the basic HTML files. You can add your own HTML and CSS to style them.

  • index.html
HTML
<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
</head>
<body>
    <h1>About Me</h1>
    <p>This is the About Me page.</p>
</body>
</html>
  • projects.html
HTML
<!DOCTYPE html>
<html>
<head>
    <title>Projects</title>
</head>
<body>
    <h1>Projects</h1>
    <p>These are my projects.</p>
</body>
</html>
  • contact.html
HTML
<!DOCTYPE html>
<html>
<head>
    <title>Contact</title>
</head>
<body>
    <h1>Contact</h1>
    <p>This is the Contact page.</p>
</body>
</html>

Step 4: Create the Flask App

Open app.py and add the following code:

Python
from flask import Flask, render_template

app = Flask(__name__)

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

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

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

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

Step 5: Run the Application

In your terminal, navigate to the project directory and run:

Bash
python app.py

The application will start, and you can visit http://127.0.0.1:5000/ in your web browser to see it.

Sample Output

Upon running the Flask app, you’ll see your portfolio web application with three pages:

  • http://127.0.0.1:5000/ will display the “About Me” page
  • http://127.0.0.1:5000/projects will display the “Projects” page
  • http://127.0.0.1:5000/contact will display the “Contact” page

Conclusion

Congratulations, you’ve built a simple portfolio web application using Python and Flask! This is just the foundation. You can extend this by adding your own CSS styles, incorporating a database to store project details, or even deploying it online.

FAQ

  1. What is Flask, and how does it differ from other web frameworks in Python? Answer: Flask is a micro web framework for Python. It is called “micro” because it is lightweight and does not include specific tools or libraries for tasks like form validation or database abstraction, unlike some other frameworks like Django. Flask provides the basic tools and components needed to build a web application, allowing developers the flexibility to choose and integrate other libraries as needed.
  2. Explain the basic structure of a Flask application. Answer: A Flask application typically consists of a Python script that creates an instance of the Flask application, defines routes, and handles HTTP requests. It also includes templates for rendering HTML pages and may include a folder for static files like CSS and JavaScript. Here’s a basic structure:
   myapp/
   ├── app.py
   ├── templates/
   │   ├── index.html
   ├── static/
   │   ├── style.css
   └── venv/
  1. How can you define a route in Flask, and what is a route decorator? Answer: In Flask, you can define a route using a route decorator. For example:
Python
   @app.route('/')
   def index():
       return 'Hello, World!'

Here, the @app.route('/') decorator associates the index function with the root URL (“/”) of the web application.

  1. What is the purpose of a Flask template, and how do you render one in a view function? Answer: Flask templates are used to separate HTML code from Python code in your web application. To render a template in a view function, you can use the render_template function provided by Flask. For example:
Python
   from flask import render_template

   @app.route('/hello')
   def hello():
       return render_template('hello.html', name='John')

This will render the hello.html template and pass the variable name with the value ‘John’ to the template.

  1. Explain how Flask handles HTTP methods (GET, POST, etc.) and how you can specify which methods a route should accept. Answer: By default, a route in Flask handles GET requests. You can specify which HTTP methods a route should accept by providing the methods argument to the @app.route decorator. For example:
Python
   @app.route('/submit', methods=['POST'])
   def submit_form():
       # Handle POST request here

This route will only accept POST requests.

  1. What is Flask-WTF, and why would you use it in a Flask application? Answer: Flask-WTF is an extension for Flask that integrates with the WTForms library. It simplifies the handling of web forms in Flask applications by providing features for form validation, CSRF protection, and rendering forms in templates. It’s commonly used when building forms in Flask applications.

Related Posts

We use cookies to improve your experience on our website