2 min read
Step 1: Starting
Create the project and basic structure.
Create the Project Folder
In Terminal:
mkdir ~/Desktop/MoodBoard
cd ~/Desktop/MoodBoardStart Claude
claudeYour First Prompt
I want to build a visual mood board tool called MoodBoard.
What it does:
- A full-page canvas where you can add visual items
- Items include: color swatches, image cards, and typography samples
- Items display on a responsive grid
- Clean, minimal UI — the board itself is the focus
Keep it simple — single page, no framework needed.
Use vanilla HTML, CSS, and JavaScript.
Start with the basic HTML structure, a top toolbar, and an empty board area.What to Expect
Claude will create:
- An
index.htmlfile with the page structure - CSS for the toolbar and board area
- A clean starting layout
Verify It Works
Open the HTML file in your browser:
Open index.html in my browserOr manually open the file. You should see a toolbar at the top and an empty board area below.
Checkpoint
- Project folder created
- Basic HTML file with structure
- Page opens in browser
- Toolbar and empty board area visible
What You Learned
- Starting web projects with no build tools
- Vanilla HTML/CSS/JS is enough for real tools
- A toolbar + canvas is a common app layout pattern