Lesson 4: Building a Portfolio Page

A portfolio website showcases your skills, projects, and experience. It acts as an online resume that helps clients and employers see your work. In this lesson, you’ll learn how to build a modern, responsive portfolio page using HTML, CSS, and Bootstrap.

—

What You’ll Learn

1. Structuring a Portfolio Page

Sections to include:

Header with navigation

About section

Projects showcase

Contact form

Footer

2. Creating the Portfolio Layout with Bootstrap

Using Bootstrap’s grid system for flexible layouts

Adding a sticky navbar for navigation

Example:

<nav class=”navbar navbar-expand-lg navbar-dark bg-dark”>

<div class=”container”>

<a class=”navbar-brand” href=”#”>My Portfolio</a>

<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarNav”>

<span class=”navbar-toggler-icon”></span>

</button>

<div class=”collapse navbar-collapse” id=”navbarNav”>

<ul class=”navbar-nav ms-auto”>

<li class=”nav-item”><a class=”nav-link” href=”#about”>About</a></li>

<li class=”nav-item”><a class=”nav-link” href=”#projects”>Projects</a></li>

<li class=”nav-item”><a class=”nav-link” href=”#contact”>Contact</a></li>

</ul>

</div>

</div>

</nav>

3. Styling the Portfolio Page

Using Bootstrap and custom CSS for a unique design

Example:

.hero {

background: url(‘background.jpg’) no-repeat center center/cover;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

color: white;

text-align: center;

}

4. Showcasing Projects with Cards

Using Bootstrap cards to display projects

Example:

<div class=”container my-5″ id=”projects”>

<h2 class=”text-center”>My Projects</h2>

<div class=”row”>

<div class=”col-md-4″>

<div class=”card”>

<img src=”project1.jpg” class=”card-img-top” alt=”Project 1″>

<div class=”card-body”>

<h5 class=”card-title”>Project 1</h5>

<p class=”card-text”>A brief description of the project.</p>

<a href=”#” class=”btn btn-primary”>View Project</a>

</div>

</div>

</div>

</div>

</div>

5. Adding a Contact Form

Implementing a responsive form using Bootstrap

Example:

<div class=”container my-5″ id=”contact”>

<h2 class=”text-center”>Contact Me</h2>

<form>

<div class=”mb-3″>

<label for=”name” class=”form-label”>Name</label>

<input type=”text” class=”form-control” id=”name” required>

</div>

<div class=”mb-3″>

<label for=”email” class=”form-label”>Email</label>

<input type=”email” class=”form-control” id=”email” required>

</div>

<div class=”mb-3″>

<label for=”message” class=”form-label”>Message</label>

<textarea class=”form-control” id=”message” rows=”4″ required></textarea>

</div>

<button type=”submit” class=”btn btn-primary”>Send</button>

</form>

</div>

6. Adding a Footer

Displaying social links and copyright text

Example:

<footer class=”bg-dark text-white text-center py-3″>

<p>&copy; 2025 My Portfolio | Designed by Me</p>

<a href=”#” class=”text-white mx-2″>LinkedIn</a>

<a href=”#” class=”text-white mx-2″>GitHub</a>

</footer>

—

Practical Session: Create Your Portfolio Page

1. Set up the structure with HTML.

2. Use Bootstrap to create a responsive layout.

3. Style it with CSS for a professional look.

4. Add interactivity with animations or effects.

—

Challenge

Add a project filter so users can browse projects by category.

Integrate CSS animations to make elements fade in when scrolling.

Implement a “Download Resume” button with a link to a PDF file.

—

Summary

1. This lesson teaches you how to build a professional portfolio website using Bootstrap. By the end of this session, you’ll have a personalized, mobile-friendly portfolio page that showcases your work effectively.