From an idea to a live website

Let’s do this

1. 1
   In this guide

   Choose a website or a web app

   A website might show a gardener’s services, photos and contact details. A web app lets people do a job, such as track which plants need watering. Both open in a browser, and both can start without accounts or a database.

2. 2
   In this guide

   Follow the files through four places

   Finder holds the project folder. Codex or Claude Code edits its files. Your browser shows a practice version on your Mac. Later, GitHub holds saved copies and Cloudflare serves the public version. Closing your laptop will not switch off the published site.

3. 3
   In this guide

   Build one useful thing first

   Our running example is Little Garden: a page about plant care, then a list where you can add a plant and mark it as watered. Use that idea or your own. The main course gets it online; the extra lessons add shared data and accounts.

4. 4
   On your Mac

   Use one AI helper

   Pick Codex if you already have access through ChatGPT, or Claude Code if your Claude plan includes it. You do not need both subscriptions. Every message in this course works as a brief for either tool. Setup comes after you create the folder.

   OpenAI: desktop setup (opens a new tab)
5. 5
   In this guide

   Keep a simple building rhythm

   Ask for one change, open the preview, try it, then save a working version. You decide what is right. AI can produce pages that look finished while buttons do nothing, so trying the real task is part of building.