From your first request to a published website

Prepare Codex, then start with the link

Use your own ChatGPT account and the Codex experience available in your desktop app. The official quickstart describes sign-in, choosing a folder, and selecting Codex for development. Follow the current interface. If you already have Pro, use the access and usage shown in your account; this exercise does not require setting up an API key. Keep login and account confirmations in the official UI.

Official OpenAI quickstart

Prepare a practice folder and a browser. Let Codex tell you which permissions or tools are missing. Browser control is environment-dependent; if unavailable, open the preview yourself and report what you see. Keep any unrelated work out of the practice folder.

Explore and prepare a local copy

Your decision

What would you like this gallery to become? Explore first, then choose one small change that matters.

What to do

Open the gallery and try search and language switching. Send the request below to Codex. Follow its folder-selection and file-access instructions. Let it obtain this site’s starter.zip, prepare your own copy, and return a running preview address. No manual terminal steps are required.

Send to Codex

I'd like to try making a personal gallery like this:
https://moss-codex-session-1.winl.ai/en/

Take a look, get the editable source, and help me run my own copy. I'm not familiar with setup, so tell me what I need to do next. Don't change the content or publish anything yet.

Expected result

Your own project folder and a working local preview. The editable gallery is in demo; the site root contains teaching materials. Keep those roles clear.

Check: The local gallery shows nine drawings and matches the reference. Codex identifies its working folder. Opening the public URL does not prove a local copy is running.

Understand the project and record a baseline

Your decision

Identify content and interaction logic before choosing where to edit.

What to do

Ask Codex to read without editing and explain the four parts. Run the baseline checks below in the local gallery. Before changes, ask it to save a recoverable copy or Git checkpoint and explain where it is stored.

Send to Codex

Walk me through this project first. Which files handle the page structure, styles, drawings, and search? How does the title switch languages? Explain it in plain language without changing anything. Then help me save a version I can restore before editing.

Expected result

Locate index.html, styles.css, script.js, and assets. Keep a baseline and restoration point. The nine illustrations are included original SVGs, not images generated live in this lesson.

Check: All: 9 → All + whale: 1 → Long way home + whale: 0 → All with the query retained: 1. Clear the query: 9. Open and close a drawing’s details.

Request a small change and review the plan

Your decision

Choose a fictional title you would enjoy sharing. The example is “绕远一点” in Chinese and “The Scenic Route” in English; choose your own if you prefer.

What to do

Continue the conversation with your idea and review Codex’s understanding and plan. Check that it changes only the bilingual main title and necessary copy while preserving artwork and interactions. Narrow any extra scope.

Send to Codex

I'd like to rename the gallery: ‘The Scenic Route’ in English and ‘绕远一点’ in Chinese. Just change the main title. Keep all nine drawings, search, filters, and details. Tell me how you'd do it before making the change.

Expected result

A small plan identifying files and checks. It should account for data-en/data-zh attributes rather than changing visible text alone.

Check: The plan repeats both titles accurately and adds no sign-in, database, AI API, or unrelated framework migration. You can explain which plan you accepted.

Implement and review the difference

Your decision

Does the plan match your intended scope? Agree on it before implementation.

What to do

Ask Codex to implement the title change and open the preview. Ask for the file difference: what changed, before and after, and why. Look at the result and then its explanation.

Send to Codex

That sounds good. Go ahead and make the change, then open it for me to try. Show me what changed, which files you edited, and anything you haven't checked.

Expected result

Your local gallery shows the new title and an actual file diff. Your copy changes; the public reference does not update automatically.

Check: English title correct → Chinese correct → English still correct. The nine SVGs remain intact. Ask why if many unrelated files change.

Verify with one consistent checklist

Your decision

Would you accept this version? Decide from actual behavior.

What to do

Use the checklist below. Codex may help with browser checks, but try the page yourself at least once. If it cannot control a browser, test yourself and report actual results. Record passed, failed, and not checked separately.

Send to Codex

I'd like to try it myself. Help me list the checks without changing the original expectations. Record what actually happens. Tell me which checks you can't perform and I'll do them. Pay particular attention to whether switching languages brings back the old title.

Expected result

A verification record comparing expected and actual behavior, with screenshots or clear interaction records.

Check: Check titles, 9→1→0→1, query clearing, details, language switching, keyboard access, and a narrow viewport using the table. Counterexamples are part of understanding the rules.

Diagnose and practice restoration

Your decision

Investigate real issues; if everything works, pass it without inventing a defect. Practice restoration only in your own copy.

What to do

For a real issue, describe what happened as below. Then ask Codex to restore only the title change, rerun the same checks, and let you decide whether to retain the original or reapply the new title.

Send to Codex

When I switch to Chinese, the main title goes back to the original. I expected ‘绕远一点’. Can you find out why, explain the cause, and make a small fix? Don't rewrite the other features.

Restore in your practice copy

I'd like to practice restoring the original title. Revert only this title change and keep the rest of the project. Explain which saved version you'll use before doing it. Then let me check the original behavior again.

Expected result

The conversation above is hypothetical; use it only if observed. A fix should explain the cause and evidence. Restoration should be limited to this change.

Check: After restoration, the title matches the baseline and artwork and interactions remain usable. If you reapply the new title, verify both languages again.

Connect Vercel and publish your version

Your decision

What do you want to share, and in which personal project? Confirm it is your own practice copy.

What to do

Ask Codex to open Vercel and help you find sign-up or sign-in. Existing users simply sign in. Handle codes, terms, and account confirmations yourself. Check the current plan’s suitability, limits, and possible costs. A custom domain is unnecessary. Let Codex inspect available tools and use the supported connection or official CLI. Browser login alone does not authorize deployment tools.

Send to Codex

I'd like to share this gallery. Open Vercel and help me prepare the account and deployment connection. Tell me when I need to sign in, receive a code, or authorize access. Check the source folder, account, and project first. Don't overwrite the teaching site or publish yet.

After checking the target

The target looks right. Publish the gallery version we've just checked to my project. When it's ready, give me the production URL and help me check the titles, search, filters, and details there.

The prompts do not grant blanket access. Complete any sign-in or authorization required by your actual environment. A Git repository is optional for this local static exercise; let Codex use an available supported deployment path.

Expected result

Codex identifies the actual deployment method, login state, account or team, your own project, and source folder. Publish the gallery files in demo, not the entire teaching package, for your learner project.

Check: Review the files and target first. After confirming, use the next request to publish. Open the returned public URL and rerun the title and 9→1→0→1 checks there.

Make a second iteration and save a handoff

Your decision

Choose content you care about. Suggested task: write a new bilingual note for the observatory and show the corresponding copy in each language.

What to do

Some detail copy in the current gallery is still English; this is a real starter limitation. Inspect the observatory’s existing copy and write both versions yourself. Ask Codex to plan the data and detail-language changes while preserving all IDs, SVGs, search, and filters. Verify as before, then decide whether to update your own live project.

Send to Codex

I'd like the observatory detail to feel more personal. I've written two notes: [your English] and [your Chinese]. How can we show the right one when I switch language? Explain the plan first. Keep the artwork and other drawings unchanged.

Expected result

A content change you defined and verified, with a short record of assets, changed files, checks, known issues, and the next task.

Check: The observatory shows correct copy in both languages, including after reopening. Other drawings and filters still work. Record the local folder, project name, actual production URL, and unfinished work without credentials.

Connect both sessions to your domain and HTTPS

Complete Session 1’s Vercel publishing flow first. The example uses the already purchased winl.ai domain and retains each Vercel project name as its subdomain prefix. Both example hostnames passed DNS and HTTPS checks on November 12, 2026. The preparation and verification workflow below remains available to follow. Use your own domain and projects for your exercise.

1. Check access to your signed-in pages

Open Cloudflare and Vercel. Handle sign-in and verification yourself. Check that Codex can access the actual controlled pages; a login in another browser does not establish a connection. If browser control is unavailable, follow the page steps yourself while discussing them in Codex.

I'm signed in to Cloudflare and Vercel. I own winl.ai and want one address for each session, keeping the existing Vercel project names as the prefixes. Check whether you can see both dashboards and confirm the projects and domain first. Don't change settings yet. Tell me if I need to sign in or authorize access.

2. Confirm DNS hosting and preserve existing records

Select winl.ai in Cloudflare. Check Active status and authoritative nameservers. Retain a working setup. If Pending, compare the registrar’s nameservers with Cloudflare’s assigned values before changing anything. Record existing web, email and verification entries and check whether either target hostname is already used. Cloudflare setup

Check whether Cloudflare is already serving DNS for winl.ai. Are moss-codex-session-1 and moon-tea-session-2 already used? Show the current records and proposed changes. Leave email and other websites alone.

3. Add each hostname to its matching Vercel project

In each project, open Settings → Domains → Add Existing, or its current equivalent. Add the matching full hostname from the table to Production. Read that project’s displayed DNS requirements and any ownership TXT verification. Subdomains generally use CNAME; use the current dashboard values rather than a memorized target. Do not include /demo/ in DNS. Vercel domain setup

Match moss-codex-session-1.winl.ai to the Session 1 project and moon-tea-session-2.winl.ai to Session 2. Verify the mapping, add each domain, and show the actual record type, name, target and any ownership TXT Vercel requests. Let me review that table before changing Cloudflare.

4. Apply the requested DNS records in Cloudflare

Open winl.ai → DNS → Records. The names will normally be moss-codex-session-1 and moon-tea-session-2. Use each matching project’s displayed target. Start with DNS only (gray cloud) and Auto TTL: Cloudflare resolves DNS while Vercel serves the site and TLS. Preserve existing values and resolve conflicts explicitly. Cloudflare proxy status

Show exactly how the two records should look using the table we checked. If there are no conflicts, configure them as DNS only with Auto TTL. Explain existing-record conflicts before replacing anything. Keep root, email and other websites unchanged, then check both Vercel projects.

5. Verify HTTPS separately for both hostnames

After DNS validation, Vercel attempts automatic certificate issuance and renewal. A separately purchased SSL certificate is usually unnecessary. Check both domain and certificate statuses, then visit each HTTPS address. DNS-only traffic does not require changing Cloudflare’s zone-wide SSL mode. If adding orange-cloud proxy later, first check its edge certificate, then use Full (strict) with a valid Vercel origin certificate. Do not use Flexible as a workaround or casually change zone-wide settings. Vercel certificates · Cloudflare Full (strict)

Both DNS records are saved. Check that each hostname opens the right session, the HTTPS certificate matches, and HTTP redirects to HTTPS. Try both languages, slides, manuals and demo videos. If anything is pending, tell me whether it's DNS, ownership verification or certificate issuance rather than calling it finished.

6. Update course links after both sites pass

Retain the vercel.app addresses for checking. Once both new hosts work, inspect both course headers, cross-session links, manual entry URLs and source archives. Replace relevant absolute URLs while preserving relative paths and language switching. Republish both projects and verify navigation in both directions. Keep winl.ai itself unchanged unless you separately choose a landing page or redirect.

Once both domains pass, update course links and manual entry URLs to the new addresses across both sites. Show the affected files, publish the agreed changes to both projects, and verify cross-session navigation, languages, downloads and HTTPS. Save the original DNS values and recovery steps.

Done when: Each hostname serves the correct session, HTTPS is valid, HTTP redirects, languages and assets work, course links are correct, and both projects, DNS before/after, certificate status and unfinished items are recorded.