XQA
Back to Python
2026-02-245 min read

Portfolio Gallery (Python Programming)

Learn Portfolio Gallery (Python Programming) step by step with clear examples and exercises.

Why This Matters

In today's competitive job market, having an impressive portfolio is crucial for showcasing your skills and attracting potential employers. A well-designed portfolio gallery can make a significant difference in how you are perceived by recruiters and clients. By learning to create a portfolio gallery using Python programming, you will not only demonstrate your proficiency in this versatile language but also gain valuable web development experience.

Prerequisites

To follow this guide, you should have a basic understanding of the following:

  1. Python syntax and data structures (variables, loops, functions)
  2. Working with files and directories in Python
  3. Familiarity with HTML and CSS for designing web pages
  4. Basic understanding of JavaScript for adding interactivity to your portfolio gallery (optional but recommended)

Core Concept

Setting up the project structure

Create a new directory for your portfolio gallery:

mkdir my_portfolio_gallery
cd my_portfolio_gallery

Inside this directory, create three subdirectories: html, static, and scripts. The html directory will contain your HTML files, while the static directory will store any images or other static assets. The scripts directory will house your JavaScript files for adding interactivity to your portfolio gallery (if you choose to use it).

Creating an index.html file

Create a new file called index.html inside the html directory. This file will serve as the main page of your portfolio gallery. Here's a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio Gallery</title>
<!-- Add links to any CSS or JavaScript files here -->
</head>
<body>
<h1>Welcome to My Portfolio Gallery!</h1>
<!-- Your projects will be displayed here -->
<script src="scripts/main.js"></script>
</body>
</html>

Generating the portfolio list in Python

Create a new Python script called generate_portfolio.py in the root directory (outside of the html, static, and scripts folders). This script will generate an HTML-formatted list of your projects and write it to a file inside the html directory.

Here's a simple example:

import os

portfolio_list = [
{"name": "Project 1", "description": "A brief description of Project 1"},
{"name": "Project 2", "description": "A brief description of Project 2"},

Add more projects as needed

]

with open("html/portfolio.html", "w") as f:

f.write("\n")

for project in portfolio_list:

f.write(f"{project['name']}{project['description']}\n")

f.write("

")


### Updating the index.html file with the generated list

Now that you have your portfolio list in `portfolio.html`, you can include it in your main `index.html` file:

/ Styles for the portfolio section go here /


### Serving your portfolio locally

To view your portfolio gallery, you'll need a web server. Python comes with a built-in HTTP server called `http.server`. In your terminal, navigate to the root directory of your project and run:

python -m http.server 8000


Now open a web browser and navigate to `http://localhost:8000` to see your portfolio gallery!

### Adding interactivity with JavaScript (optional)

If you want to add interactivity to your portfolio gallery, create a new JavaScript file called `main.js` inside the `scripts` directory. Here's an example of how you can make the project titles clickable:

document.getElementById("portfolio").addEventListener("click", function(event) {

if (event.target.tagName === "LI") {

alert(You clicked on ${event.target.children[0].innerText}!);

}

});

Worked Example

In this worked example, we will create a simple portfolio gallery with two projects: "Python Project 1" and "Python Project 2". We'll also add some basic styling to make our portfolio visually appealing.

  1. Create the project structure as described above.
  2. Update generate_portfolio.py to include the following projects:
portfolio_list = [
{"name": "Python Project 1", "description": "A brief description of Python Project 1"},
{"name": "Python Project 2", "description": "A brief description of Python Project 2"},
]
  1. Create a new CSS file called styles.css inside the html directory and add some basic styling:
body {
font-family: Arial, sans-serif;
}

h1 {
text-align: center;
}

ul {
list-style-type: none;
padding: 0;
}

li {
border-bottom: 1px solid #ccc;
cursor: pointer;
}

li:hover {
background-color: #f5f5f5;
}
  1. In your index.html file, include the link to your CSS file and update the portfolio section to load the contents of portfolio.html:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<!-- Include the generated portfolio list -->
<div id="portfolio">
<!-- The contents of portfolio.html will be loaded here -->
</div>
  1. Run generate_portfolio.py to create your portfolio.html file, and update your index.html file to include it:
<!-- Include the generated portfolio list -->
<div id="portfolio">
<iframe src="portfolio.html" frameborder="0"></iframe>
</div>
  1. Serve your portfolio locally using python -m http.server 8000. Open a web browser and navigate to http://localhost:8000 to see your portfolio gallery!

Common Mistakes

Forgetting to include the generated portfolio list in index.html

Make sure you've added the following line to your index.html file:

<div id="portfolio">...</div>

Not specifying a charset for HTML files

Always include a meta tag with a character encoding in your HTML files:

<meta charset="UTF-8">

Failing to update the portfolio list in generate_portfolio.py

Ensure that the projects listed in generate_portfolio.py match those you want to display on your portfolio gallery.

Not properly linking CSS and JavaScript files

Make sure you've included the links to your CSS and JavaScript files in your HTML file, and that they are located in the correct directories.

Practice Questions

  1. How can you customize the styling of your portfolio gallery using CSS? Consider adding a navigation bar or changing the color scheme.
  2. What if you want to add images or other static assets to your portfolio gallery? Can you think of a way to display these assets in an appealing manner?
  3. Can you think of a way to allow visitors to download your project source code directly from your portfolio gallery?
  4. How can you make your portfolio gallery responsive, so it looks good on both desktop and mobile devices?

FAQ

Q: How do I deploy my portfolio gallery online?

A: There are various options for deploying web applications, including using cloud services like AWS, Google Cloud, or Heroku. You can also use static site generators like Jekyll or Hugo to build your portfolio and host it on a platform like GitHub Pages.

Q: Can I use Python to create more interactive elements in my portfolio gallery?

A: Yes! You can use JavaScript libraries like jQuery, D3.js, or React along with Python to create dynamic and interactive features for your portfolio gallery.

Q: How do I make my portfolio gallery secure?

A: To ensure the security of your portfolio gallery, you should:

  1. Use HTTPS instead of HTTP when serving your website.
  2. Minimize the use of external libraries to reduce potential vulnerabilities.
  3. Keep your Python and web server software up-to-date with the latest security patches.
  4. Implement proper input validation and sanitization for any user-submitted data.
  5. Limit access to sensitive files and directories using file permissions.
Portfolio Gallery (Python Programming) | Python | XQA Learn