Your first website
A real page you can open, inspect, and make your own. Change the headline. Tweak the colors. Keep going.
Open the starterA lab for curious builders
Good ideas.
Working code.
A place to build websites, test ideas, and learn with AI. Start small. Make a change. See what happens.
Your next idea starts here.
Small experiments.
Bigger possibilities.
Build/Test/Learn/Repeat
01 / The workbench
Start with something small.
Three starting points.
Plenty of room to experiment.
The coding playground
Edit a small page and preview the result. Test an AI suggestion, run some JavaScript, or try an idea of your own.
Try the playgroundColor playground
Build a palette from a single color, check readable text combinations, and copy the CSS into your next project.
Play with color02 / Learn by doing
AI can write it.
You can understand it.
Use AI to move an idea forward. Use the lab to see what the code actually does.
- 01
Make one change.
Ask for a specific improvement, like a new layout or a button that works.
- 02
Look under the hood.
Read the changed code. Ask why it works. Try adjusting it yourself.
- 03
Test it. Then build on it.
Check the result on a narrow screen, try the controls, and keep a copy that works.
03 / Lab notes
Useful things to know.
Practical notes for the next build.
01Give AI a small, clear job.
Tell it what the page should do, who it is for, and what to change. Include the relevant code and describe the result you expect.
“Make this navigation stack on screens under 700px. Keep the desktop layout. Explain the CSS you changed.”
Try the result before asking for the next change.
02Keep the files together.
HTML gives the page structure. CSS handles its appearance. JavaScript adds behavior. Images live alongside those files.
Relative links keep this site working when you move the whole folder. Start by opening index.html in your browser.
03Test more than the screenshot.
Click every link and button. Use the keyboard. Try a phone-sized window. Check that the text is readable and images load.
If you change JavaScript, open your browser’s developer console and look for errors. A page can look right and still behave wrong.
04Give every project its own home.
Try new projects in separate folders so you can keep a working version. For cPanel hosting, upload a finished site to the document root configured for its domain.
A DNS record points a hostname toward hosting. The hosting account also needs that hostname configured so it serves the intended site.
Read cPanel’s domain guideLess waiting. More making.
Stay curious.
Open a starter. Try a change. Make it yours.