Build Your First Portfolio Website

Create a professional portfolio website using HTML and CSS that showcases your skills, projects, and personality. This project will teach you the fundamentals of web development while creating something you can actually use to land your first job.

What You'll Build

A fully responsive, multi-page portfolio website featuring:

• Home page with an eye-catching hero section and introduction
• About page telling your story and highlighting your skills
• Projects section showcasing your work (even if it's just this project to start!)
• Contact page with a working contact form
• Mobile-first responsive design that looks great on all devices
• Modern CSS techniques including Flexbox and CSS Grid
• Semantic HTML for accessibility and SEO

Learning Objectives

By completing this project, you will:

• ✅ Master HTML document structure and semantic elements
• ✅ Create beautiful layouts with CSS Flexbox and Grid
• ✅ Implement responsive design with media queries
• ✅ Understand web accessibility principles
• ✅ Learn CSS custom properties (CSS variables)
• ✅ Practice modern CSS techniques like clamp() and min()
• ✅ Set up a development workflow with live-reload
• ✅ Deploy your website using GitHub Pages

Prerequisites

Before starting this project, you should be familiar with:

• Basic HTML elements and structure
• CSS selectors and properties
• How to use a code editor (VS Code recommended)
• Basic terminal/command line usage
• Git basics (clone, add, commit, push)

Don't worry if you're not 100% confident with these yet - this project will reinforce these concepts!

Project Requirements

Your portfolio website must include:

Core Requirements ✅

• [ ] Semantic HTML5 structure
• [ ] Responsive design (mobile, tablet, desktop)
• [ ] Navigation between pages
• [ ] Professional color scheme and typography
• [ ] Contact form (HTML only for now)
• [ ] Valid HTML and CSS (passes validation)

Bonus Challenges 🎯

• [ ] CSS animations and transitions
• [ ] Dark/light mode toggle
• [ ] Custom CSS Grid layouts
• [ ] CSS-only hamburger menu for mobile
• [ ] Optimized images with multiple formats

Skills You'll Develop

Technical Skills:

• HTML5 semantic markup
• CSS Flexbox and Grid
• Responsive web design
• CSS custom properties
• Git version control
• Web deployment

Professional Skills:

• Project planning and organization
• Design thinking and user experience
• Attention to detail
• Problem-solving and debugging
• Creating documentation

Time Commitment

This project is designed to take approximately 3 days to complete:

• Day 1: Set up project structure and create the home page
• Day 2: Build about and projects pages, add responsive design
• Day 3: Create contact page, polish styling, and deploy

Take your time and don't rush - this is about learning, not speed!

What's Next?

Ready to start building? Head to the instructions page where you'll find:

• Step-by-step setup guide
• Detailed development instructions
• Code examples and explanations
• Troubleshooting tips
• Submission guidelines

This is your first step toward becoming a professional web developer. Let's build something amazing! 🚀