project moodboard

MoodBoard

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

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:

  1. DOM manipulation — Adding, removing, and rearranging elements dynamically
  2. Drag-and-drop — The native HTML5 drag-and-drop API
  3. CSS Grid — Flexible layouts that adapt to content
  4. localStorage — Saving and loading data in the browser
  5. 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:

  1. Starting — Create the project and scaffold
  2. Canvas — Build the board canvas and grid layout
  3. Adding Items — Color swatches, images, and typography cards
  4. Drag & Drop — Reorder items by dragging
  5. Saving — Persist boards with localStorage
  6. 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

  1. Describe what went wrong — "Items aren't dropping in the right position"
  2. Share any errors — Copy the browser console errors
  3. Ask Claude for help — "What should I check?"

Let's Start

Ready? Open Terminal and navigate to your projects folder:

terminal
cd ~/Desktop

Exercises

  1. Write a one-sentence description of what your MoodBoard will help you do in your own design workflow — this sharpens the intent you'll feed Claude in Step 1.
  2. List the three item types (color, image, typography) and sketch on paper what each card should look like, so you can spot when Claude's output matches your vision.
  3. Confirm your environment is ready: open Terminal, run cd ~/Desktop, and verify Claude Code launches with the claude command before moving on.