Frontend EngineerBeginner7 modules~3.5 hours hands-on
Build a Personal Portfolio Website
Build and deploy a real, responsive personal portfolio website with plain HTML, CSS, and a little vanilla JavaScript — no framework — and ship it live on GitHub Pages.
// What you'll be able to do- Prerequisites, scope, and honest expectations
- The blueprint and your semantic HTML skeleton
- The cascade, the box model, and a striking hero
- Build the projects grid and contact section
7 modules, built to run
Every module ships runnable code. Expand any one to see what's inside.
00IntroductionWhat you'll build and why30 min
Objective — What you'll build and why
Start moduleFree preview
01OrientationPrerequisites, scope, and honest expectations30 min
Objective — Prerequisites, scope, and honest expectations
02Project SetupThe blueprint and your semantic HTML skeleton30 min
Objective — The blueprint and your semantic HTML skeleton
03Styling the FoundationThe cascade, the box model, and a striking hero30 min
Objective — The cascade, the box model, and a striking hero
04Layout with Flexbox and GridBuild the projects grid and contact section30 min
Objective — Build the projects grid and contact section
05Responsive and InteractiveMedia queries and a vanilla-JS theme toggle30 min
Objective — Media queries and a vanilla-JS theme toggle
06See It RunDeploy your live portfolio to GitHub Pages30 min
Objective — Deploy your live portfolio to GitHub Pages
Ready to start Build a Personal Portfolio Website?
Jump into Module 0 — no account required.