Chapter 26 | Portfolio Project

HTML CSS Portfolio Project

A portfolio website showcases your skills, projects and contact details in a professional way. In this chapter, you will build a complete responsive portfolio page using HTML and CSS.

Start Portfolio View Code

Hero Profile

Introduce yourself with a powerful headline.

Skills

Show technical and professional abilities.

Projects

Display practical work and mini projects.

Contact

Add call-to-action and contact details.

Learning Objectives

After This Chapter, You Will Be Able To

This project gives you a practical page that can be improved into your real portfolio.

Create Portfolio

Build a personal portfolio webpage from scratch.

Use Sections

Arrange about, skills, projects and contact sections.

Style Professionally

Use clean typography, colors, cards and buttons.

Make Responsive

Use Grid and media query for mobile-friendly layout.

Project Goal

Build a Personal Portfolio Website

A portfolio is useful for students, freelancers, designers, developers and job seekers.

1 Project Purpose

A portfolio website is your digital introduction. It shows who you are, what skills you have, what work you can do and how people can contact you.

Project Theme: Personal Portfolio Website for a Beginner Web Designer

Career Tip: Even a simple portfolio can help students show practical confidence during interviews, internships and freelancing discussions.

My Portfolio About Skills Projects

Hello, I am a Web Designer

I build clean and responsive websites.

Skills

Projects

Contact

Portfolio Sections

What Should a Portfolio Include?

A good portfolio is simple, clear and easy to scan.

Navigation

Logo/name and links to about, skills, projects and contact.

Hero Section

Your name, role, short introduction and call-to-action button.

About Section

A short paragraph about your learning, interests and goals.

Skills Section

HTML, CSS, basic design, MS Office or other skills.

Projects Section

Mini projects, landing pages, forms and practice work.

Contact Section

Email, phone, location or enquiry button.

Folder Structure

Recommended Portfolio Structure

Use a clean folder system when converting this into a real project.

2 Folder Structure

portfolio-website/
├── index.html
├── css/
│    └── style.css
├── images/
│    └── profile.jpg
└── projects/
    └── project-files

3 Recommended Content

Your name and role
Short career objective
List of skills
Three or more project cards
Contact information
Professional footer

Section	Purpose	Best Practice
Hero	First impression	Keep headline clear and confident
About	Personal introduction	Keep it short and honest
Skills	Show abilities	Use badges or cards
Projects	Show practical work	Add project title and short description
Contact	Allow people to reach you	Use clear call-to-action

Portfolio Quality

What Makes a Portfolio Professional?

It should be clean, focused, readable and easy to navigate.

Visual Quality

Clean color combination
Readable fonts
Consistent spacing
Modern cards and buttons
Balanced white space

Content Quality

Clear introduction
Honest skill list
Real project details
Short descriptions
No spelling mistakes

Technical Quality

Responsive layout
Semantic HTML
CSS variables
Mobile testing
Working links

Complete Code

Build the Portfolio Website

Run this code and then customize it with your own name, skills and projects.

Complete HTML + CSS Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Personal Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

*{
            box-sizing:border-box;
            margin:0;
            padding:0;
        }

html{
            scroll-behavior:smooth;
        }

body{
            font-family:Arial, Helvetica, sans-serif;
            background:#f8fbff;
            color:var(--text);
            line-height:1.7;
        }

.container{
            width:min(90%,1120px);
            margin:auto;
        }

header{
            background:var(--white);
            box-shadow:var(--shadow);
            position:sticky;
            top:0;
            z-index:10;
        }

.navbar{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:20px;
            padding:16px 0;
        }

.logo{
            color:var(--primary);
            font-size:22px;
            font-weight:900;
        }

.menu{
            display:flex;
            gap:14px;
            flex-wrap:wrap;
        }

.menu a{
            color:var(--primary);
            text-decoration:none;
            font-weight:800;
        }

.hero{
            background:
                radial-gradient(circle at top right, rgba(214,165,73,.35), transparent 32%),
                linear-gradient(135deg,var(--primary),var(--secondary));
            color:var(--white);
            padding:80px 0;
        }

.hero-grid{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:40px;
            align-items:center;
        }

.hero h1{
            font-size:clamp(38px, 6vw, 66px);
            line-height:1.05;
            margin-bottom:16px;
        }

.hero h1 span{
            color:#f5c15d;
        }

.hero p{
            color:#eeeaff;
            font-size:18px;
            margin-bottom:24px;
        }

.btn{
            display:inline-block;
            background:var(--accent);
            color:var(--primary);
            padding:13px 22px;
            border-radius:999px;
            text-decoration:none;
            font-weight:900;
            transition:.3s;
        }

.btn:hover{
            transform:translateY(-4px);
            background:#f5c15d;
        }

.profile-card{
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.25);
            border-radius:30px;
            padding:30px;
            text-align:center;
        }

.avatar{
            width:150px;
            height:150px;
            border-radius:50%;
            background:var(--white);
            color:var(--primary);
            margin:0 auto 18px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:64px;
            box-shadow:0 20px 45px rgba(0,0,0,.18);
        }

section{
            padding:70px 0;
        }

.section-title{
            text-align:center;
            max-width:760px;
            margin:0 auto 38px;
        }

.section-title h2{
            color:var(--primary);
            font-size:36px;
            margin-bottom:10px;
        }

.about-box{
            background:var(--white);
            padding:34px;
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            max-width:850px;
            margin:auto;
            text-align:center;
        }

.skills{
            background:var(--soft);
        }

.skill-grid,
        .project-grid,
        .service-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
            gap:22px;
        }

.skill-card,
        .project-card,
        .service-card{
            background:var(--white);
            padding:26px;
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            transition:.3s;
        }

.skill-card:hover,
        .project-card:hover,
        .service-card:hover{
            transform:translateY(-8px);
        }

.skill-card h3,
        .project-card h3,
        .service-card h3{
            color:var(--primary);
            margin-bottom:10px;
        }

.project-card{
            border-top:5px solid var(--accent);
        }

.tag-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }

.tag{
            background:var(--soft);
            color:var(--primary);
            padding:6px 10px;
            border-radius:999px;
            font-size:13px;
            font-weight:800;
        }

.contact{
            background:linear-gradient(135deg,var(--primary),var(--dark));
            color:var(--white);
            text-align:center;
        }

.contact p{
            color:#e9e7ff;
            max-width:700px;
            margin:0 auto 24px;
        }

footer{
            background:var(--dark);
            color:#cbd5e1;
            text-align:center;
            padding:24px;
        }

@media(max-width:850px){
            .navbar{
                flex-direction:column;
                text-align:center;
            }

.hero-grid{
                grid-template-columns:1fr;
                text-align:center;
            }

.hero{
                padding:58px 0;
            }

.section-title h2{
                font-size:30px;
            }
        }
    </style>
</head>
<body>

<header>
    <div class="container navbar">
        <div class="logo">My Portfolio</div>

<nav class="menu">
            <a href="#about">About</a>
            <a href="#skills">Skills</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </nav>
    </div>
</header>

<section class="hero">
    <div class="container hero-grid">
        <div>
            <h1>Hello, I am <span>Rahul Sharma</span></h1>
            <p>
                I am a beginner web designer learning HTML, CSS and responsive website development.
                I love creating clean and practical webpages.
            </p>
            <a href="#projects" class="btn">View My Projects</a>
        </div>

<div class="profile-card">
            <div class="avatar">RS</div>
            <h2>Web Design Learner</h2>
            <p>HTML | CSS | Responsive Design</p>
        </div>
    </div>
</section>

<section id="about">
    <div class="container">
        <div class="section-title">
            <h2>About Me</h2>
            <p>A short introduction about my learning journey.</p>
        </div>

<div class="about-box">
            <p>
                I am learning web design to build modern websites, landing pages and portfolio projects.
                My goal is to improve my practical skills and create useful digital work for students, institutes and local businesses.
            </p>
        </div>
    </div>
</section>

<section id="skills" class="skills">
    <div class="container">
        <div class="section-title">
            <h2>My Skills</h2>
            <p>Skills I have learned during this HTML with CSS course.</p>
        </div>

<div class="skill-grid">
            <div class="skill-card">
                <h3>HTML Structure</h3>
                <p>Creating headings, paragraphs, forms, tables and semantic sections.</p>
            </div>

<div class="skill-card">
                <h3>CSS Styling</h3>
                <p>Designing colors, typography, spacing, cards, buttons and shadows.</p>
            </div>

<div class="skill-card">
                <h3>Responsive Layout</h3>
                <p>Using Flexbox, Grid and media queries to make mobile-friendly pages.</p>
            </div>
        </div>
    </div>
</section>

<section id="services">
    <div class="container">
        <div class="section-title">
            <h2>What I Can Create</h2>
            <p>Simple web design work I can practice and improve.</p>
        </div>

<div class="service-grid">
            <div class="service-card">
                <h3>Landing Pages</h3>
                <p>Clean promotional pages for courses, services or small businesses.</p>
            </div>

<div class="service-card">
                <h3>Portfolio Pages</h3>
                <p>Simple personal profile websites for students and freelancers.</p>
            </div>

<div class="service-card">
                <h3>Contact Pages</h3>
                <p>Modern enquiry and contact page layouts with form design.</p>
            </div>
        </div>
    </div>
</section>

<section id="projects" class="skills">
    <div class="container">
        <div class="section-title">
            <h2>My Projects</h2>
            <p>Practice projects created using HTML and CSS.</p>
        </div>

<div class="project-grid">
            <div class="project-card">
                <h3>Course Landing Page</h3>
                <p>A responsive landing page for online skill courses.</p>
                <div class="tag-row">
                    <span class="tag">HTML</span>
                    <span class="tag">CSS</span>
                    <span class="tag">Grid</span>
                </div>
            </div>

<div class="project-card">
                <h3>Portfolio Website</h3>
                <p>A personal portfolio website with skills and projects.</p>
                <div class="tag-row">
                    <span class="tag">Flexbox</span>
                    <span class="tag">CSS Variables</span>
                    <span class="tag">Responsive</span>
                </div>
            </div>

<div class="project-card">
                <h3>Contact Page</h3>
                <p>A clean contact section with call-to-action design.</p>
                <div class="tag-row">
                    <span class="tag">Form</span>
                    <span class="tag">Design</span>
                    <span class="tag">Mobile</span>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="contact">
    <div class="container">
        <h2>Let Us Connect</h2>
        <p>
            I am open to learning, practice projects and web design improvement opportunities.
        </p>
        <a href="mailto:student@example.com" class="btn">Email Me</a>
    </div>
</section>

</body>
</html>

Portfolio Preview Browser result

Practice Task: Replace the sample name, role, skills, projects and email with your own details. Add one real project card.

Customization Tasks

Make This Portfolio Your Own

After running the code, customize it step-by-step.

Content Changes

Replace sample name
Add your real role or goal
Write your own about paragraph
Add your actual skills
Add your contact email

Design Changes

Change primary color
Change accent color
Adjust border-radius
Add profile photo
Improve section spacing

Advanced Changes

Add contact form
Add social media links
Add project screenshots
Add smooth animations
Separate CSS into style.css

Portfolio Tip: A small but honest portfolio is better than a copied design with fake projects.

Quick Revision

Remember These Points

Revise these before moving to Chapter 27.

Portfolio Purpose

It presents your profile, skills, work and contact details.

Hero Section

It creates the first impression with name, role and CTA.

About Section

It explains your learning journey and professional goal.

Skills Section

It highlights your abilities in simple cards.

Projects Section

It proves your practical work and project experience.

Contact Section

It helps people connect with you easily.

Protected Learning Content

HTML CSS Portfolio Project

Hero Profile

Skills

Projects

Contact

After This Chapter, You Will Be Able To

Create Portfolio

Use Sections

Style Professionally

Make Responsive

Build a Personal Portfolio Website

1 Project Purpose

Hello, I am a Web Designer

What Should a Portfolio Include?

Navigation

Hero Section

About Section

Skills Section

Projects Section

Contact Section

Recommended Portfolio Structure

2 Folder Structure

3 Recommended Content

What Makes a Portfolio Professional?

Visual Quality

Content Quality

Technical Quality

Build the Portfolio Website

Make This Portfolio Your Own

Content Changes

Design Changes

Advanced Changes

Portfolio Project Check

1. A portfolio website is mainly used to:

2. Which section gives the first impression?

3. Which layout is used for responsive project cards in the code?

4. What should project cards include?

5. What is important before sharing a portfolio?

Remember These Points

Portfolio Purpose

Hero Section

About Section

Skills Section

Projects Section

Contact Section