Your site and game already open on a phone browser. Today they become installable apps — with an icon on the home screen, opening full-screen like anything from the store. Android first; iPhone owners covered too.
Make your site or game phone-ready, install it on your phone's home screen, then package it into a real Android app file (APK) and install that too. Then start the spec of your main project — the tool from your job.
You need: your laptop · your phone (Android or iPhone) · the “most wasted time” sentence from yesterday's homework.
There is no separate “phone internet.” Your phone's browser opens the exact same files — through a screen one third as wide. A layout that adapts to the width it's given is called responsive. Some layouts adapt naturally; some break: text overflows, buttons land under thumbs that can't reach them.
See your site the way a phone sees it
Open your live site (the .netlify.app address) on your laptop — then grab the browser window's edge and drag it narrower, down to about a palm's width. Watch what happens to your layout at each width. This is exactly what a phone screen does to it.
Step done when: you can name what breaks (or confirm nothing does) at phone width.
Ask Codex to make it adapt
Make this site fully responsive for phones: nothing should overflow or need sideways scrolling at 380px width, text stays readable, buttons are big enough for a thumb.
Tell me what you changed, then I'll check by narrowing my browser window.Verify the same way as step 1 — narrow the window. Then re-publish (drag the folder onto your Netlify site's Deploys page) and check the live address on your actual phone.
Step done when: the live site looks right on your phone with no sideways scrolling.
✦ One set of files now serves every screen on Earth — that's why we build for the browser first.
Add the app costume (manifest + icon)
Turn this site into an installable PWA:
1. Add a web app manifest — app name "[your app name]", short name, standalone display, a background color that matches the site.
2. Create a simple, bold app icon yourself (SVG or PNG) that fits the site's style — no external images.
3. Link everything correctly in index.html.
Tell me what files you added and how I can test that it's installable.Step done when: Codex reports the manifest and icon are in place.
Re-publish, then install on Android
Open the address in Safari → Share button (□↑) → Add to Home Screen → Add. Same result: your icon, full-screen app.
Step done when: your icon opens your software full-screen from the home screen.
Make a real Android app file (APK)
The home-screen install came from the browser. A real Android app is a file — an .apk — that installs on any Android phone, no browser needed. Microsoft's free tool PWABuilder wraps your live site into one:
.netlify.app address, press Start..apk — plus an .aab, the file Google Play would want if you ever publish there..apk to your phone (Telegram “Saved Messages” works well) and open it on the phone.iPhones don't install .apk files. The path there: a free Apple developer account can put your own app on your own iPhone for about 7 days (built on a Mac with Xcode); the App Store itself requires Apple's $99/year program. The logic is the same one you just did — build, sign, install — so when you need it, you'll already understand it. For today, iPhone owners keep the home-screen install from step 4.
✦ A real app file with your name in it is installed on your phone. Yesterday this was a website.
Step done when: your app appears in the phone's app list, installed from the .apk file.
Start your main project: the spec
Take yesterday's sentence — “the task that wastes most of my time” — and turn it into a spec. You don't write it alone: the agent interviews you. Watch a real one first:
Four questions produced a spec a stranger could build from. That file is the seed of what you demo on Day 12. Now yours:
Help me write a spec for a tool. Interview me: ask one question at a time — 5 questions total — about the task I want to automate, who uses the tool, what they enter, what they get back, and how we'll know it works.
Then write spec.md in this folder with: WHAT IT DOES (2 sentences), WHO USES IT, INPUT → OUTPUT, and DONE WHEN (3 checks). Keep it under half a page.✦ The agent just interviewed you like an analyst. That spec file outlives every chat session — it's the first stone of your product.
Step done when: spec.md exists and a stranger could read it and understand your tool.
Finish the phone app feeling, sharpen your spec, and show the cohort.
homework complete — mark the day done below
Tick when the homework above is finished — it syncs to your account.
A PWA gets them 90% of the way with zero store friction: installable icon, full-screen, instant updates by re-publishing. A store app only becomes necessary for push-everywhere, deep hardware access, or store credibility — and that's a scoping decision, not a default.
The layout adapts to whatever width it's given. Test: drag your browser window narrow and watch. If nothing overflows or needs sideways scrolling at a palm's width, phones will be fine.
Because the knowledge lives in your head. The agent knows how tools are built; only you know your task, your annoyances, your definition of “works.” The interview drags that knowledge into a file — where no chat session can lose it.