2 min read
MoodBoard
A visual mood board tool for collecting colors, images, and typography. A design-focused web project.
What You’ll Build
MoodBoard — a web app that:
- Lets you collect color swatches, images, and typography cards
- Arranges items on a flexible grid canvas
- Supports drag-and-drop reordering
- Saves boards to localStorage
- Exports boards as PNG
A tool designers actually use, built from scratch.
Why This Project
This project teaches core web skills through a design lens:
- DOM manipulation — Adding, removing, and rearranging elements dynamically
- Drag-and-drop — The native HTML5 drag-and-drop API
- CSS Grid — Flexible layouts that adapt to content
- localStorage — Saving and loading data in the browser
- Deployment — Getting your tool live on the internet
You’re building something you’d actually use in your design workflow.
Before You Start
Make sure you have:
- Claude Code installed and working (Guide: The Setup)
- A code editor (VS Code, Cursor, etc.)
- A modern browser (Chrome, Firefox, Safari)
No frameworks. No build tools. Vanilla HTML, CSS, and JavaScript.
The Steps
Work through these in order:
- Starting — Create the project and scaffold
- Canvas — Build the board canvas and grid layout
- Adding Items — Color swatches, images, and typography cards
- Drag & Drop — Reorder items by dragging
- Saving — Persist boards with localStorage
- Deploying — Put it on the internet
Time Estimate
Each step takes 10-20 minutes. The full project is a solid afternoon build.
If You Get Stuck
- Describe what went wrong — “Items aren’t dropping in the right position”
- Share any errors — Copy the browser console errors
- Ask Claude for help — “What should I check?”
Let’s Start
Ready? Open Terminal and navigate to your projects folder:
cd ~/DesktopThen begin: Step 1: Starting —>