Craft AnythingGUIDES
Menu

Project walkthrough

Craft Anything tutorial: build a movie catalogue.

Build a six-film catalogue. Follow five steps, from a reference to a result you can check.

Maintained by Arthur WintersUpdated November 4, 2026

On this page

Try the project reference

Search six fictional films. Combine a title and genre, then reset.

Title searchGenre filterEmpty stateMobile layout
Ready? Start the first step ↓
FRAME / a small film collectionSix films. One good evening.

Find your next story.

A reference made for this guide

6 films

THE QUIET
ORBIT

The Quiet Orbit

Sci-Fi · 2025

PAPER
CITIES

Paper Cities

Drama · 2024

A MAP
OF RAIN

A Map of Rain

Drama · 2026

MIDNIGHT
SIGNAL

Midnight Signal

Thriller · 2025

THE LAST
GREENHOUSE

The Last Greenhouse

Sci-Fi · 2026

SUNDAY
DETOUR

Sunday Detour

Comedy · 2024

Tutorial reference · six fictional films.

Get your reference ready
A film reference sheet under a magnifying glass.
  1. Open the standalone reference and copy its address.
  2. Download the six-film data.
  3. Confirm the target opens from the environment that will study it.
Open reference ↗Download film data ↓

Using a local preview? Keep its server running while Craft Anything reads the address.

Next: create the project →

Create the project and paste the request
A website selected above the target address, Clean room and Deep options.
ArtCraft · type, target and mode detail. Full size ↗
  1. Have your coding agent ready. Click New project, then A website.
  2. Replace the example address with your reference address.
  3. Use Clean room for this visitor-visible website exercise.

Clean room works from what a visitor can see. Deep can inspect available code and files.

Paste the complete request

Copy the request below into Say what you want, replacing the short example shown in the screenshot. Then select Start.

Say what you want text field and Start button.
ArtCraft · request and Start detail. Full size ↗
Film catalogue · HTML / CSS / JavaScript
6 fictional filmsSearch + genreReset + empty state390px layout
Read the complete request
Build a single-page film catalogue using the supplied reference.
Use HTML, CSS and JavaScript. Keep all film data local.

Include these six fictional films:
- The Quiet Orbit | Sci-Fi | 2025
- Paper Cities | Drama | 2024
- A Map of Rain | Drama | 2026
- Midnight Signal | Thriller | 2025
- The Last Greenhouse | Sci-Fi | 2026
- Sunday Detour | Comedy | 2024

Requirements:
1. A heading, title-search field, genre filter and reset button.
2. A responsive poster grid. Show each title, genre and year.
3. Search titles without case sensitivity. Trim surrounding spaces.
4. Combine search and genre filtering. Show the visible film count.
5. If there are no matches, show “No films match” and a reset option.
6. Reset clears both controls and shows all six films.
7. Keyboard users can reach and operate every control.
8. At 390px wide, controls fit and the page has no horizontal overflow.
9. Use original abstract poster artwork; no IMDb logos or film images.
10. Include instructions for opening or running the project.

Ask if a required input is missing. Build only this one-page scope.
Download the request ↓Next: follow the build →

Follow the four stages
Progress lists Study, Build, Check and Ready with a separate likeness score.
ArtCraft · progress detail. Full size ↗
  1. StudyCheck that the intended reference was captured.
  2. BuildRead the latest activity and respond to questions.
  3. CheckInspect the reference and generated view together.
  4. ReadyOpen the result and try its features.

If the build asks for approval

A command approval card with Allow once, Always for this project and Don’t allow.
ArtCraft · detail from the project view. Full size ↗

Read the command and its target. Use Allow once for a single action you want to permit. Use Don’t allow when you do not want that action.

Ready to continueYou have project files and can open the result using its run instructions.
Official workflow ↗No files? Check the attempt →
Next: try the features →

Check the website you generated
A project check reports that the about page is 412 pixels wide at a 390 pixel viewport.
ArtCraft · detail of a failed layout check. Full size ↗

Read the check message for a concrete issue. This official example flags horizontal overflow. Then try each action in your own output. Tick it when the expected behavior works.

0 of 7 checked
Next: make one improvement →

Make one change and check again
The Ask for a change message field below the project conversation.
ArtCraft · follow-up field detail. Full size ↗

Use Ask for a change below the project conversation. If the first output omitted a result count, paste this revision and send it:

Revision request
Add a visible result count above the grid.
Update it on search and genre changes, including 0 films.
Keep search, filter and reset working.
Check the 390px layout and that Reset restores six films.
RecheckSearch → genre → empty state → reset → narrow layout.
Next: keep your project →

Read your time and usage report

GEEKrar’s project report shows completed stages, 2 hours 33 minutes, an estimated 16.21 dollars and 3 million tokens.
GEEKrar · IMDb attempt · 1:34 · usage report. Full size ↗
Time
Separate waiting, failed attempts and the build you are reviewing.
Tokens
Record the reported unit, builder and model where known.
Cost
Check actual charges with your provider; the interface shows an estimate.
Help with an unexpected report →

Keep the project or recover from a problem

Open folder control in the project view.
ArtCraft · project control detail. Full size ↗

Select Open folder. Keep the entire project folder and its run instructions. Continue in the app or your development tools.

Sources and guide preparation