project moodboard

Step 2: Canvas

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

Full Lesson Reference

Build the board canvas with a grid layout.

Where We Are

You have a basic page with a toolbar and empty board. Now let's make the board a proper grid canvas.

Set Up the Grid

terminal
Make the board area use CSS Grid:
- Auto-fill columns that are roughly 200px wide
- Cards should have some gap between them
- The grid should adapt as the window resizes
- Add some padding around the edges

The board should fill the remaining viewport height below the toolbar.

Add Placeholder Cards

To test the layout, ask Claude to add some placeholder items:

terminal
Add 6 placeholder cards to the board so I can see the grid in action.
Give them different heights to test the layout.
Style them with rounded corners, a subtle border, and a light background.

Add Item Controls

terminal
In the toolbar, add three buttons for adding items:
- "Add Color" — for color swatches
- "Add Image" — for image URL cards
- "Add Text" — for typography samples

Style them as simple, clean buttons. Don't wire up functionality yet —
just get the buttons in place.

Style the Toolbar

terminal
Make the toolbar look polished:
- Fixed at the top
- Subtle bottom border or shadow
- App name "MoodBoard" on the left
- Add buttons grouped on the right
- Keep it compact — not too tall

Test the Layout

Resize your browser window. The grid should reflow — fewer columns on narrow screens, more on wide screens.

If not:

terminal
The grid should be fully responsive. Columns should auto-fill
based on available width. No horizontal scrolling.

Checkpoint

  • Board uses CSS Grid with auto-fill columns
  • Placeholder cards display in the grid
  • Toolbar has Add Color, Add Image, and Add Text buttons
  • Layout is responsive at different widths

What You Learned

  • CSS Grid with auto-fill and minmax
  • Fixed toolbars with flexbox
  • Viewport height layouts
  • Responsive design without media queries

Exercises

  1. Send the "Set Up the Grid" and "Add Placeholder Cards" prompts, then resize your browser from narrow to wide and confirm the column count changes without any horizontal scrolling.
  2. Add the three toolbar buttons and style the toolbar — verify the app name sits on the left and the add buttons group on the right.
  3. Give the placeholder cards different heights and observe how the grid handles them; note whether the layout still feels balanced, since real items will vary in height too.