project moodboard

Step 6: Deploying

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

Full Lesson Reference

Put your mood board tool on the internet.

Choose a Host

For simple static sites, Vercel and Netlify are free and easy.

terminal
Help me deploy this to Vercel.
Walk me through the steps.

Or:

Help me deploy this to Netlify.

The Deployment Process

Claude will guide you through:

  1. Creating an account (if needed)
  2. Connecting your project
  3. Deploying

For simple HTML/CSS/JS, deployment is usually just dragging and dropping files.

Get Your URL

After deployment, you'll have a public URL like:

  • moodboard.vercel.app
  • moodboard.netlify.app

Test it in your browser. Add some items, refresh, and confirm localStorage works on the live site.

Optional: Custom Domain

If you own a domain:

Help me connect my custom domain to this deployment.

Checkpoint

  • Site deployed
  • Public URL works
  • Adding items and saving works on the live site
  • You can share it with others

What You Learned

  • Deploying static sites is fast and free
  • Vercel/Netlify handle hosting for you
  • localStorage works on deployed sites the same as locally

Congratulations

You built a real design tool from scratch. No frameworks, no libraries — just HTML, CSS, and JavaScript.

You used DOM manipulation to create elements dynamically, the drag-and-drop API for reordering, CSS Grid for layout, and localStorage for persistence. These are foundational web skills that transfer to any project.

Ideas for Extending

  • Export the board as a PNG image using html2canvas
  • Add a notes card type for freeform text
  • Import colors from an image (extract dominant palette)
  • Add board templates with preset layouts
  • Support pasting images directly from clipboard

Exercises

  1. Deploy your MoodBoard to Vercel or Netlify using the prompt above, then open the public URL on a different device or browser and confirm adding items and saving still work.
  2. Share your live URL with one person and ask for a first impression — note any rough edge they spot that you'd want to refine.
  3. Pick one item from "Ideas for Extending" (PNG export with html2canvas is a great first choice) and write the prompt you'd use to build it, then ship the feature.