← Websites
📷
Photography Portfolio with Lightbox
A masonry photo grid that opens into a full-screen, keyboard-navigable lightbox.
🟡 MediumDifficulty
3-4 hoursTime
JavaScript, TypeScriptLanguages
What you're building
A photographer's portfolio site with a responsive masonry-style image grid. Click any photo and it opens in a slick full-screen lightbox with a caption, and you can navigate between photos with on-screen arrows, keyboard arrow keys, or Escape to close - just like a real gallery site.
What you'll unlock 🔓
You'll need
- Basic HTML
- Basic CSS
- Basic JavaScript
🗺️ Build roadmap
01 Set up the photo data and grid
→
02 Build the masonry layout
→
03 Build the lightbox modal structure
→
04 Open the lightbox on click
→
05 Add next/prev navigation
→
06 Add keyboard controls
→
07 Polish transitions
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free