ChatGPT Is Just the Beginning

Build a landing page using ChatGPT chat, code blocks, and Codex Cloud.

Introduction

30 Second Summary

You have probably asked an AI chatbot to help you with something, then spent the next ten minutes copying text, switching tabs, and pasting it into the right place. The AI did its job, but you became the delivery service.

In this project, you will build a personal landing page three different ways, each time using a more powerful layer of ChatGPT's ecosystem. By the end, you will know exactly when to chat with GPT, when to edit code inline, and when to hand the entire job to an autonomous coding agent.

What You'll Build

You will hand a plain-English description to Codex Cloud, watch it autonomously rewrite your landing page, and come back to a ready-to-merge code change in your GitHub repository.

By the end of this project, you'll have:

A personal landing page you can show off, built three different ways to demonstrate GPT's escalating capability layers and stored in a GitHub repository.
A working Codex Cloud environment that lets you describe what you want in plain English and receive ready-to-merge code changes without writing or moving a single line yourself.
The confidence to choose between ChatGPT chat, interactive code blocks, and Codex for any task, and explain the tradeoffs to someone else.
Secret Mission: Use Codex to add a dark mode toggle with JavaScript to your landing page, proving it can coordinate HTML, CSS, and JavaScript in one autonomous task.

Are there any prerequisites?

You need a ChatGPT account with a paid plan (Plus at $20/mo or higher). No coding experience is required, though familiarity with basic ChatGPT prompting from earlier projects in this series is helpful.

Before We Start

Before any hands-on work begins, this is your moment to commit to what you're building and why it matters. You're about to construct the same personal landing page three times, each time using a more powerful layer of ChatGPT, so you can feel the leap from manual copy-paste to fully autonomous code delivery.

Set Up Your Accounts

Before you can build your landing page three different ways, you need two things in place: a ChatGPT account with a paid plan and a GitHub account to store your code.

In this step, you will confirm your ChatGPT plan and create a GitHub repository. This repository is where all three versions of your landing page will live.

In this step, get ready to:

Confirm your ChatGPT paid plan is active.
Create a GitHub account and verify your email.
Create a project repository on GitHub.

Confirm your ChatGPT paid plan

You need a paid ChatGPT plan (Plus, Pro, or higher) to access code block features and Codex later in this project. Let's make sure your plan is active before moving on.

In your browser, go to chatgpt.com and sign in with your account.
Click your profile icon or name in the sidebar.
Select Settings.
Click Billing.
Confirm your plan shows Plus, Pro, or a higher tier. If you need to upgrade, select the plan that works for you.

Don't see a paid plan?

If your account is on the Free tier, you will need to upgrade. In Settings, select the plan that works for you. Plus at $20/mo is the minimum needed for this project.

Help me figure out which ChatGPT plan I need for Codex and code blocks.

Create a GitHub account

GitHub is where your landing page code will live. It also connects directly to Codex later, so Codex can read and write code in your project without you copying anything.

✔️ I already have a GitHub account

Go to github.com and sign in.
Once you see your GitHub dashboard, you are ready for the next substep.

ⓧ I need to create one

Go to github.com/signup in your browser.
Follow the prompts to create your personal account.
Choose a username and set a password when prompted.
Verify your email address when GitHub sends you a confirmation email.

Why do I need to verify my email?

Without a verified email, you cannot create repositories on GitHub. Make sure to check your inbox and click the verification link before moving on.

Create your project repository on GitHub

A repository is a folder on GitHub that holds all the files for a project. You need one so ChatGPT and Codex have a place to deliver your code.

On GitHub, click the + icon in the top-right corner.
Select New repository.
In the Repository name field, type my-landing-page.
Set visibility to Public.
Check the Add a README file checkbox.
Click Create repository.

Why initialize with a README file?

Codex requires a non-empty repository to work with. If you skip the README, Codex will not be able to connect to your repo later. The README gives it something to read so it recognizes the repository as initialized.

What do you think you will see on the page after clicking Create repository?

You should see your new my-landing-page repository page with a single README.md file listed and its contents displayed below.

Don't see the repository page?

If you see an error about the repository name, it may already be taken on your account. Try a slightly different name like my-landing-page-v1.

If the repository page appears but no README.md is listed, you may have skipped the Add a README file checkbox. Delete the repository under Settings at the bottom of the repo page and create it again with the checkbox checked.

Help me troubleshoot creating my GitHub repository.

Your accounts are set up and your repository is ready. Next up, you will build your first landing page by prompting ChatGPT in basic chat and manually adding the code to GitHub.

Build V1 with ChatGPT Chat

Your ChatGPT account and GitHub repository are ready. Now it is time to put them to work.

ChatGPT can generate code from a simple prompt, but in its most basic form it has no connection to where your code needs to live. You are the one who copies the code, switches to GitHub, pastes it in, and commits every single change by hand.

In this step, get ready to:

Prompt ChatGPT to generate a personal landing page in HTML.
Manually commit the code to your GitHub repository.
Request a change and experience the full copy-paste-commit cycle.

Prompt ChatGPT for your landing page

In ChatGPT, start a new chat by clicking New chat in the sidebar.
Check the dropdown at the top of the chat interface.
Make sure it says Chat, not Work or Codex. If it shows something else, click the dropdown and select Chat.
Ask ChatGPT to build your landing page by typing this prompt:

Create a simple personal landing page in a single HTML file with inline CSS. Include my name, a short bio, and links to three social profiles. Use a clean, modern design with a centered layout.

What are HTML and CSS?

HTML is the language that structures web pages. It defines what appears on the page: headings, paragraphs, links, and images.

CSS controls how those elements look: colors, fonts, spacing, and layout. "Inline CSS" means the styling is written directly inside the HTML file instead of in a separate file. This keeps everything in one place, which is perfect for a simple project like this.

ChatGPT generates the code in a code block inside its response. The result will look different each time, but it will contain a complete web page.

Review the code ChatGPT generated. You do not need to understand every line.
Copy the entire HTML code from the response.

Manually add the code to your GitHub repository

You have the code in your clipboard. Now you need to carry it to GitHub yourself and save it as a file in your repository.

Switch back to your my-landing-page repository on GitHub.
Click Add file near the top of the file list.
Click Create new file.
Type index.html in the filename field at the top.
Paste the HTML code you copied from ChatGPT into the code editor below the filename.

Click Commit changes.
In the dialog that appears, type a commit message like Add landing page V1 from ChatGPT.
Click Commit changes again to confirm.

Click on index.html in your repository's file list.

You should see the full HTML code for your landing page displayed on screen. That file now lives in your repository alongside README.md.

Don't see index.html?

Make sure you clicked Commit changes in the confirmation dialog. If you closed the dialog without committing, the file was not saved.
Refresh the repository page. GitHub sometimes takes a moment to update the file list.
Check the filename. It must be exactly index.html with no extra spaces or typos.
My index.html is not showing up in my GitHub repository after I committed it.

Request a change and feel the friction

Your landing page is live in your repository. Now imagine you want to make a small tweak. You need to go through the entire cycle again.

Return to your ChatGPT conversation.
Ask ChatGPT to update the design by typing this prompt:

Change the background color to a light blue gradient and add a fourth social link for my GitHub profile.

Wait for ChatGPT to regenerate the entire page with the changes.
Copy the new HTML code from the response.

You have the updated code. Now you need to manually carry it back to GitHub and replace the old version.

Switch back to your my-landing-page repository on GitHub.
Click on index.html to open the file.
Click the edit (pencil) icon near the top right of the file view.
Select all the existing code in the editor (Cmd+A on macOS or Ctrl+A on Windows).
Paste the new code to replace all of it.
Click Commit changes.
Type a commit message like Update background color and add fourth link and click Commit changes to confirm.

Click on index.html in your file list to view the updated code.

You should see your updated landing page code with the new background color and the fourth social link included in the HTML.

Still seeing the old code?

Make sure you selected all the old code before pasting. If you missed the select-all step, the old code may still be mixed in.
Refresh the page. GitHub sometimes shows a cached version until you reload.
My GitHub file still shows the old landing page code after I committed changes.

Take a moment to think about what you just did to make one small design change to your landing page.

Why did that take so many steps?

To change a background color and add one link, you had to: switch to ChatGPT, type a new prompt, wait for the response, copy the code, switch to GitHub, find the file, click edit, select all, paste, write a commit message, and commit. That is over 10 steps for one small change.

This is the basic chat workflow. ChatGPT generates the code, but you are the one carrying it to where it needs to go. Every round trip is manual.

Your landing page is in your repository, and you have felt the full weight of the manual copy-paste cycle. Next up, you will discover a faster way to edit and preview code without ever leaving ChatGPT.

Level Up with Code Blocks

In Step 2, you built your landing page by prompting ChatGPT and manually carrying code to GitHub. Every change meant another copy-paste round trip.

Interactive code blocks let you edit and preview code directly inside the chat window. In this step, you will use them to iterate on your landing page and discover where they hit their limit.

In this step, get ready to:

Generate a landing page inside an interactive code block.
Edit and preview your HTML directly in ChatGPT.
Discover where code blocks fall short for your GitHub workflow.

Trigger an interactive code block

Code blocks are a ChatGPT feature that keeps code separate from the rest of a response. You can edit the code in place and switch to a live preview without leaving the chat.

In ChatGPT, start a new chat.
Type the following prompt and send it:

Create a personal landing page in HTML. Use a code block I can edit and preview.

ChatGPT generates the code inside an interactive code block.
Look for the option to switch between Code and Preview on the code block.
Click Preview to see your landing page rendered directly inside ChatGPT.

You should see a live HTML preview of a personal landing page displayed right inside the ChatGPT window. No copying, no pasting, no file management.

Don't see a Preview option?

Make sure you are on a paid ChatGPT plan (Plus, Pro, or higher). Code block previews may not be available on the free plan.

If the code appeared as a plain static block with no Preview toggle, try starting a new chat and sending the prompt again. Sometimes the model generates a plain code response instead of an interactive block.

Why don't I see a Preview option on my ChatGPT code block?

Edit inline and preview instantly

With the code block open, you can make changes directly in the code and see them reflected in the preview. You can also ask ChatGPT to edit the code block for you.

Click directly into the code block to place your cursor inside the code.
Make a small change: update the name text to your own name, or change a color value.
Switch to Preview to see your change reflected instantly.

Your edit appears in the preview without copying or pasting anything. Now let ChatGPT help you make a bigger change.

Send this message in the same chat:

Add an 'About Me' section with a brief paragraph.

ChatGPT edits the code block in place with the new section.
Before you check the preview, take a guess: what do you expect to see on the page now?
Switch to Preview to confirm the About Me section appears on your landing page.

Your preview now shows the landing page with an About Me section. ChatGPT edited the existing code instead of generating a brand new response.

Notice the difference from Step 2

In Step 2, adding a section meant prompting ChatGPT, copying the entire response, switching to GitHub, pasting it over the old file, and committing. That took several minutes and multiple context switches.

With code blocks, ChatGPT edited the code in place and you previewed the result without leaving the chat. The editing loop went from minutes to seconds.

Hit the wall: getting code out of ChatGPT

You have a polished landing page sitting in a code block inside ChatGPT. Think about this: how will you get this improved version into your my-landing-page repository on GitHub?

Look around the code block interface for any option to push code to GitHub, sync with a repository, or export to an external service.

There is no such option. The only way to get this code into your repository is the same process you used in Step 2:

Copy the code from the code block.
Switch to your my-landing-page repository on GitHub.
Open index.html and click the edit (pencil) icon.
Paste the new code over the old code.
Write a commit message and click Commit changes.

Why is this a problem?

Code blocks are a better editor. They let you iterate faster and preview instantly. But they have no connection to your GitHub repository. You are still the courier carrying code between two disconnected tools.

Every time you want to save your work to GitHub, you repeat the same manual transfer. The editing got faster, but the delivery did not.

You have felt what code blocks can do and where they stop. Next up, you will meet Codex Cloud, which connects directly to your repository and works without you carrying a single line of code.

Enter Codex Cloud

In the last step, you discovered that interactive code blocks let you edit and preview code right inside ChatGPT. The editing was faster, but you still had to copy code out and paste it into GitHub yourself.

In this step, you hand the reins to Codex Cloud. Codex connects directly to your GitHub repository, reads your existing code, writes changes, and delivers a diff you can review and merge.

In this step, get ready to:

Connect your GitHub account to Codex Cloud.
Delegate a full page redesign to Codex and let it work autonomously.
Review and merge Codex's changes into your repository.

Connect GitHub to Codex

Codex Cloud needs access to your GitHub repository so it can read and write code directly. Let's connect your accounts and create an environment.

Return to chatgpt.com.
At the top of the chat interface, open the dropdown next to Chat and Work.
Select Codex.

Codex prompts you to connect your GitHub account. This is how it gets permission to read and write code in your repositories.

Click the link to authorize your GitHub account when prompted.
GitHub opens in a new tab asking you to grant access. Authorize ChatGPT to access your repositories.
When prompted to choose which repositories Codex can access, select your my-landing-page repository.

What is Codex Cloud?

Codex Cloud is an autonomous coding agent built into ChatGPT. Instead of generating code for you to copy, it connects directly to your GitHub repository.

You describe what you want, and Codex reads your files, writes code, and delivers a diff you can review and merge. You go from doing the work yourself to reviewing work done for you.

Now you need to create an environment. An environment tells Codex which repository to work with and how to set it up.

Open the environment settings in Codex.
Create a new environment for your my-landing-page repository.
Leave all settings at their defaults. Since this is a simple HTML project, no custom setup script is needed.

You should see your my-landing-page environment listed in the environment settings.

Don't see the environment option?

Make sure you selected Codex from the dropdown at the top of the chat interface. The environment settings only appear inside the Codex view.

Codex is available to ChatGPT Plus, Pro, Business, Enterprise, and Edu users. Verify your plan under Settings if you are unsure.

Still stuck? Help me connect my GitHub account to Codex Cloud.

Hand your first task to Codex

Your environment is ready. Time to give Codex a real coding task and watch it work autonomously.

Start a new Codex chat.
Select your my-landing-page environment.
Type or paste the following prompt into the Codex chat:

Redesign my landing page with a modern gradient background, a profile photo placeholder, an About Me section, a Skills section with three items, and a Contact section with an email link. Keep everything in a single index.html file with inline CSS.

Press Enter to submit the task.

Codex starts working. It reads your existing index.html, plans its changes, writes the new code, and validates its work. You can monitor progress in real time or let it run in the background.

What happens while Codex works?

Codex operates in a sandboxed cloud environment. It clones your repository, reads your files, makes edits, and runs any necessary checks.

You are not involved in the coding process at all. When it finishes, it shows its answer and a diff of any files it changed.

When Codex finishes, review the diff it presents. The diff shows every change to your index.html, line by line.

What is a diff?

A diff is a side-by-side comparison that highlights what was added, removed, or changed in a file. Green lines are additions. Red lines are removals.

Reviewing a diff before merging is how professional developers approve code changes.

Choose to either open a pull request to merge the changes into your repository, or apply the changes directly.
Either option works. Pick whichever you prefer and merge the changes.

You should see a confirmation that your changes were applied or that a pull request was created.

Codex task stuck or failed?

Make sure you selected the correct my-landing-page environment before submitting your prompt. If you started the chat without selecting an environment, Codex does not know which repository to work with.

If the task keeps failing, check that your repository is not empty. Codex requires a non-empty repository with at least one file (your README.md and index.html should already be there from earlier steps).

Still having trouble? Help me troubleshoot my Codex Cloud task.

Confirm your changes on GitHub

Before you check, what do you expect to see inside your index.html file on GitHub? Think about what you asked Codex to build.

Return to your my-landing-page repository on GitHub.
If you opened a pull request, click on the Pull requests tab and merge it first.
Click on index.html to view the file.

Your index.html now contains a fully redesigned landing page with a gradient background, profile photo placeholder, About Me section, Skills section, and Contact section. Codex wrote all of this and delivered it directly to your repository.

Don't see the updated file?

If you chose the pull request option, make sure you merged it. Unmerged pull requests do not update the files on the main branch.

Try refreshing the GitHub page. Sometimes the file view caches the old version for a few seconds.

Still not seeing changes? Help me find my Codex changes in my GitHub repository.

💡 Three layers, three workflows

Think about the three layers you just used. In Step 2, basic chat generated code but you had to copy, paste, and commit every change yourself. In Step 3, code blocks let you edit and preview inline, but you still carried the code to GitHub manually.

Here in Step 4, you described a result in plain English. Codex read your repo, wrote the code, and delivered it ready to merge. You did not copy a single line. That shift from doing to reviewing is what "agentic" means.

You just went from being the copy-paste courier to the code reviewer. Next up, put Codex to work on something that would be genuinely painful to do by hand.

Secret mission

Add Dark Mode with Codex

You have seen Codex handle a straightforward redesign. But what about a task that requires HTML, CSS, and JavaScript working together in a single file? Put Codex to the real test by adding a fully functional dark mode toggle to your landing page.

Clean Up Your Resources

Decide whether to keep your resources, pause them to come back later, or delete them entirely. Your GitHub repository is free to host, and the Codex Cloud environment is included in your existing ChatGPT plan, so this project adds no new ongoing costs.

Resources you used:

GitHub repository my-landing-page (free, hosted on GitHub).
Codex Cloud environment connected to my-landing-page (included in your ChatGPT plan).

Keep everything running

No action needed. Choose this if you plan to keep experimenting with Codex tasks against your landing page repository.

Your my-landing-page repository stays on GitHub at no cost. You can continue editing files or using it with Codex.
Your Codex Cloud environment remains connected and ready for new tasks whenever you return.

Pause - I'll come back to this later

Your resources are already idle. Nothing is actively running or consuming additional resources beyond your existing ChatGPT subscription.

Your GitHub repository and Codex Cloud environment persist automatically. There is nothing to shut down or pause.
When you come back, open Codex from the ChatGPT dropdown, select your my-landing-page environment, and pick up where you left off.

Delete - I don't want to use this again

Remove all project resources to start fresh. Follow both sets of instructions below to clean up completely.

Delete the Codex Cloud environment:

In ChatGPT, select Codex from the dropdown at the top of the chat interface.
Open the environment settings.
Find the my-landing-page environment and delete it.

Delete the GitHub repository:

Go to your my-landing-page repository on GitHub.
Click Settings in the repository navigation bar.
Scroll to the bottom of the page.
Click Delete this repository and follow the confirmation prompts to complete the deletion.

That's a Wrap!

Nice work! You just built the same personal landing page three different ways, and in doing so, you unlocked a clear mental model for ChatGPT's three capability layers.

You went from being the copy-paste middleware to being the reviewer who approves autonomous work. That shift is the whole point.

You've learned how to:

Build a personal landing page using three GPT capability layers: basic chat prompting, interactive code blocks for inline editing and preview, and Codex Cloud for fully autonomous coding.
Connect a GitHub repository to Codex Cloud and delegate a real coding task to an autonomous agent that reads your repo, writes code, and delivers a ready-to-merge diff.
Choose the right tool for any task by understanding when to chat with GPT, when to edit with code blocks, and when to hand work to Codex.
Secret Mission: Used Codex to add a dark mode toggle with JavaScript, localStorage, and coordinated HTML/CSS changes in a single autonomous task.

Ready to quiz yourself?