First version: your subscription list

What you’ll do: you start from an empty folder and end with a page that shows your own subscriptions, with the monthly and yearly totals. You don’t write code: you say what you want, check, and ask for fixes. Time: 30–45 minutes. You’ll need: the ChatGPT desktop app, installed and signed in, with Codex mode open (module 01). It works on any plan, including Free.

In module 01 you made a page with 5 made-up examples. Now you make it yours: with the subscriptions you actually pay for. You don’t need any bank data. The name of each subscription, its price and how often you pay are enough.

Steps

1. Write your list on paper. Write down 6–8 subscriptions or recurring bills. For each one, note: the name, the price, whether you pay monthly or yearly, and a category (for example “entertainment”, “home”, “health”). Example: Netflix, €12, monthly, entertainment. Home insurance, €120, yearly, home. Don’t want to use real amounts? Make them up. The lab works the same way. What you should see: a short list you can copy into a message.

2. Open the project. If you already made the subscriptions folder in module 01, you’ll find it in the sidebar. Click it. If not, make a new folder called subscriptions in Documents now and open it with ⌘O (Mac) or Ctrl+O (Windows). Under the composer (the box where you type), open the permissions button and choose Ask for approval. What you should see: the subscriptions project at the top of the sidebar, and Ask for approval under the composer.

3. Ask for the first version, with your list. Start a new chat with ⌘N / Ctrl+N. Copy the message below, replace the list with yours, and send it with Enter:

   I want a web page that shows my subscriptions and how much they cost me.
   If index.html already exists in the folder, rebuild it with the list below.
   My subscriptions (name, price in euros, monthly or yearly, category):
   - Netflix, €12, monthly, entertainment
   - Spotify, €11, monthly, entertainment
   - Gym, €35, monthly, health
   - Home insurance, €120, yearly, home
   At the top, large, show the monthly total. Yearly subscriptions count in it divided by 12.
   Below it, show the yearly total.
   Put everything in a single file, index.html, with no libraries or extra programs.
   All the text in English, every amount with the € sign.
   At the end, tell me both totals and how to open the page.
   

   What you should see: Codex shows you what it’s doing (reading the folder, writing the file). It may ask permission to write index.html. Read the request: if it’s about the subscriptions folder, approve it. At the end it gives you the totals and tells you how to open the page.

4. Open the page in the built-in browser. Click the link to the page in the chat. If there’s no link, write: “Give me the full address of the page, so I can open it in the built-in browser.” Then open a new tab with ⌘T / Ctrl+T and paste the address. What you should see: your list, with the monthly total at the top and the yearly total below it.

5. Check the total yourself. Open the calculator app on your phone and add it up once. For the example list: 12 + 11 + 35 = €58. The insurance, €120 a year, means €10 a month. Monthly total: €68. Yearly total: 68 × 12 = €816. What you should see: the same numbers on the page and in your own sum. If they differ, tell Codex exactly what you calculated and ask it to explain where the difference comes from.

6. First fix: the order. One change per message. Send:

   Sort the subscriptions from most to least expensive, by monthly cost.
   Put a subtle mark next to the most expensive one. Don’t change anything else.
   

   Reload the page: click in it, then press ⌘R (Mac) or Ctrl+R (Windows). What you should see: the list reordered and a single subscription highlighted. The totals stay the same.

7. Second fix: the categories.

   Group the subscriptions by category. For each category, show how much it costs per month.
   The totals at the top stay the same.
   

   What you should see: groups like “entertainment” or “home”, each with its own amount. Add up the category amounts: they should match the monthly total.

8. Fix one detail right on the page. Pick something small you don’t like: a heading that’s too small, a colour. In the built-in browser’s toolbar, choose Annotate, click that element and write what you want. Then write in the chat: “Address the comments on the page.” What you should see: Codex changes only the element you commented on.

9. Look at where your work lives. Open the file tree (the list of files in the project) with ⌘⇧E (Mac) or Ctrl+Shift+E (Windows). What you should see: the file index.html in the subscriptions folder. For now, that’s the whole app. Next time, open the project from the sidebar and carry on in the same chat or a new one.

You’re done if

• The subscriptions folder has an index.html that Codex wrote, not you
• The page shows your subscriptions, not the examples from module 01
• The monthly and yearly totals match your own sum
• You asked for at least two fixes, one per message, and Codex changed only what you asked for

If you get stuck

• Codex can’t write in the folder. Check that the subscriptions project is open and that Ask for approval is shown under the composer. If it asks for permission and you don’t answer, it waits. Approve the request that mentions your folder.
• The page won’t open in the built-in browser. Double-click index.html in Finder or File Explorer. It opens in your usual browser and looks the same.
• The total is wrong. Usually a yearly subscription wasn’t divided by 12, or was counted twice. Write: “Show me, line by line, how you calculated the monthly total.” Find where it goes wrong and ask for the fix.
• Codex changed more than you asked for. Write: “Undo the last change and go back to the previous version.” Then ask again, more precisely: what changes and what stays the same.
• You don’t see the change on the page. The page doesn’t reload by itself. Click in it and press ⌘R / Ctrl+R.