FREE LESSON / 01 — BUILD
Make the first screen.
A useful website starts with one clear answer: who is this for, and what should they do next?
Free preview · Use a computer, a browser and your own AI assistant. This page creates a prompt; it does not call an AI service.
01 / GET SPECIFIC
Meet Rinse.
Rinse is our fictional mobile-detailing business. A visitor needs to understand the service, decide whether it fits and find a way to inquire. The first screen should make that easy.
Our reference uses a quiet green palette, a clear headline, a car image and one useful next step. The exact look is yours to change.
“Mobile detailing in Oak Grove” is a useful example. “The town's #1 detailer, trusted by 5,000 customers” invents evidence. Keep this project clearly fictional until a real owner supplies approved facts.
02 / GIVE THE AI A JOB
Your first build brief.
Use the example or make up another practice business. These fields only change the prompt below; nothing is sent to an AI.
Use fictional information here. Your text stays in this page and is not saved.
03 / BUILD A SMALL FIRST VERSION
Make one screen work.
- Open your AI assistant and start a new conversation. Check your remaining usage before starting.
- Paste the brief. Ask for a downloadable index.html file with its styles included. Keep this first version small.
- Download the HTML file into a new project folder. Open it with your browser. If your assistant only returns code, copy the code into a plain-text editor, save it as index.html (not index.html.txt), then open that file.
- Read every word and correct invented claims. Try the “Explore services” link, then narrow your browser window. The link should reach the services placeholder and the page should fit without sideways scrolling.
The result will vary. You are learning to direct and review an AI assistant, so your layout doesn't need to match our example pixel for pixel.
The first result looks wrong. What should I say?
Give a specific observation and a limited change. For example: “At a narrow phone width the headline runs off the right edge. Fix that layout without changing the headline, colors or other sections. Explain what you changed so I can check it.”
I reached a usage limit.
Stop and check the account's usage screen. You can wait for the next allowance or decide whether a paid plan suits you. Don't buy more usage just because an unfinished preview tells you to. Use your AI provider's own plan page for its current limits and prices.
04 / LOOK AT WHAT YOU MADE
Does it do its job?
Check these in your own preview. Marking them records your review; this page cannot inspect or certify a website in another tab.
0 of 5 checks marked complete.
Checklist marks are saved only in this browser. They are not an assessment or a certificate.
You have a focused brief, a first screen and specific checks for its quality. The full project continues through services, inquiries, testing, publishing and handoff.
Already have a full website? Find your next fix ↗
Was the next step clear?
We’re looking for beginners to test the complete Rinse draft and show us where the instructions need work.
Explore the free beginner pilot ↗