Session Two

Building Your First Website with AI

Using Codex instead of Claude Code

By the end of this session you will have a personal brand website live on the internet. No coding experience needed. You will describe what you want, and AI does the building.

Duration~2 hoursDifficultyBeginner

In This Session

Part A — Set Up and Build Your Page
Part B — Add Visual Effects
Part C — Deploy and Make It Yours

Workshop Recording

Follow along with the live session. Hit play and the video will stick to the top as you scroll.

Part A

Set Up and Build Your Page

Install Codex

Codex is the AI tool you will use to build your website. It runs in your terminal and understands plain English. You tell it what you want, it writes all the code.

First, open your terminal

The terminal is just a text window where you type instructions for your computer. It looks intimidating but you are only going to copy and paste into it. Here is how to open it:

Mac — two ways

Option 1:Press Cmd + Space to open Spotlight, type Terminal, then press Enter
Option 2:Open Finder, go to Applications, then open the Utilities folder, then open Terminal

Windows — two ways

Option 1:Press the Windows key, type Command Prompt, then press Enter
Option 2:Press Windows key + R, type cmd, then press Enter

Check if Node.js is installed

Codex needs a tool called Node.js to run. Node.js is a program that lets your computer understand JavaScript. Most computers already have it. Let's check. Paste this into your terminal and press Enter:

Terminal

node --version

If you see a version number like v18.0.0 or v20.0.0, you are good. Skip ahead to the next section.

If you see “command not found”

Go to nodejs.org, click the big green “LTS” download button, run the installer, and click through with all the default settings. When it is done, close your terminal and reopen it, then run node --version again.

Install Codex

This command downloads and installs Codex on your computer. Paste it into your terminal and press Enter. You will see text moving across the screen — that is normal. Wait until the prompt symbol $ or > reappears before moving on.

Terminal

npm install -g @openai/codex

Note

npm is a tool that Node.js includes automatically. It downloads packages and programs from the internet. The -gmeans “install this globally so you can use it from anywhere.”

After the install finishes, run this command. It opens a browser window where you log in with your ChatGPT Plus account. Once you click Authorize, return to the terminal.

Terminal

codex auth

Pro Tip

You only need to log in once. After that, Codex remembers your account every time you open the terminal.

Always start Codex this way

Every time you open Codex, use this command. The --approval-mode full-auto flag means Codex will make changes without stopping to ask your permission on every step. This keeps things moving smoothly during the session.

Terminal

codex --approval-mode full-auto

If you are getting an error

How to copy and paste in the terminal

Mac

To paste: Press Cmd + V
To copy text from the terminal: Select it with your mouse, then press Cmd + C

Windows

To paste: Right-click anywhere in the terminal window and select Paste. Or press Ctrl + V
To copy text from the terminal: Select it with your mouse, then right-click and select Copy. Or press Ctrl + C

How to read the terminal

The terminal is not just showing you an error — it is usually telling you exactly what to do next. Before asking for help, read the last few lines carefully. You will often see something like:

›Try running: ... followed by a command. It is giving you the exact fix. Copy that command and run it.
›Permission denied or similar. Close and reopen terminal, then try the command again.

When the terminal gives you a suggested command, copy it and paste it into a new terminal window. Opening a fresh terminal clears any broken state and gives the command a clean environment to run in. On Mac, press Cmd + T to open a new tab, or close and reopen Terminal. On Windows, just open a new Command Prompt window.

Common errors and fixes

“command not found: node” or “node is not recognized”

Node.js is not installed. Go to nodejs.org, download the LTS version, run the installer, then close and reopen your terminal before trying again.

“command not found: npm”

npm comes bundled with Node.js. If npm is missing, reinstall Node.js from nodejs.org and reopen the terminal.

“command not found: codex”

Close and reopen your terminal after installing. This is needed so your terminal picks up the new command. If it still does not work, run the install command again. If it still does not work after that, let us know in the group and we will help you live.

The browser did not open during login

Look in your terminal for a URL that starts with https://auth.openai.com... Copy it and paste it into your browser manually.

Something else is going wrong

Copy the error text from your terminal (select it, then Cmd+C on Mac or right-click + Copy on Windows) and paste it into the Masterminds group. We will sort it out together.

Create your project folder and open Codex

Open your terminal and start Codex with the command below. Then give Codex the plain-English instruction to set up your project folder.

Terminal

codex --approval-mode full-auto

Once Codex is running, paste this in:

Paste into Codex

Create me a folder that I'm going to make my website in and go into that folder.

Pro Tip

When Codex asks “Trust this folder?” click Trust. This gives it permission to create and edit files inside your project. Do not skip this step.

Add your photo to the folder

Before we build, move your photo into the project folder. Make sure it is named photo.jpg.

Mac

Open Finder. Go to your home folder. Drag photo.jpg into the my-website folder.

Windows

Open File Explorer. Go to C:\Users\YourName. Drag photo.jpg into the my-website folder.

Pro Tip

To rename a photo: right-click it, select Rename, type photo.jpg, press Enter. If Windows warns you about changing the extension, click Yes.

Build your personal brand page

Fill in your own details below, replacing everything in brackets. Then copy and paste it into Codex.

Pro Tip

Click anywhere in the box to edit it. Replace every [BRACKETED] value with your own information before copying.

Paste into Codex

Edit before copying

Once Codex finishes, open the file in your browser to see it:

Mac: In the terminal, type open index.html and press Enter

Windows: In the terminal, type start index.html and press Enter

Pro Tip

If anything looks wrong, just tell Codex in plain English what to fix. For example: “Make the headline bigger” or “Change the background to white.” You do not need to touch any code.

Part B

Add Visual Effects

Once your content looks right, these two prompts will transform it from a plain page into something that feels professional and polished. Paste each one exactly as written.

Add scroll animations and glassmorphism

Paste this exactly as written. No edits needed.

Paste into Codex

Upgrade my website with these visual effects:

- Animated gradient mesh background in the hero that slowly shifts
- Glassmorphism service cards with a frosted glass effect
- Each section fades and slides in as you scroll down
- Nav bar fixed at the top with a glass blur effect
- Buttons lift and glow on hover

Use GSAP and ScrollTrigger via CDN for the scroll animations.
Keep all my content exactly as it is.

Add pro-level interactions

When the previous effects are looking great, paste this to take it further. Paste exactly as written.

Paste into Codex

Now add these pro effects:

1. Lenis smooth scroll
2. 3D card tilt on service cards
3. Magnetic buttons
4. Subtle film grain texture over the whole page
5. Stats section with 4 numbers that count up from zero on scroll — use my own numbers

Do not change any content or layout.

Pro Tip

No stats yet? No problem. Use numbers like years of experience, clients helped, hours saved per week, or an aspirational goal. Codex will use whatever you have in your page.

Part C

Deploy and Make It Yours

Your site is ready. Now put it on the internet, add your photo, and start customizing.

Deploy to Vercel

Tell Codex to deploy. It will handle everything including logging into Vercel and pushing your files live.

Paste into Codex

Deploy my website to production.

A browser window may open asking you to log in to your Vercel account. Sign in and come back to the terminal. In about 30 seconds you will get a live URL that looks like: https://my-website-abc123.vercel.app

Pro Tip

Copy that URL and keep it handy. You will share it in the group at the end.

Add your photo

Tell Codex to place your photo on the page. Edit the file name below if yours is different.

Paste into Codex

Edit before copying

Once it looks good, deploy again to update your live site:

Paste into Codex

Deploy my website to production.

Customize and explore

Now it is yours. There are no wrong moves. Try asking Codex things like:

›“Change the colors to match my brand”
›“Add a testimonials section”
›“Make the hero headline bigger and bolder”
›“Add a floating WhatsApp button in the bottom right”

Pro Tip

Every time you make a change you like, tell Codex “Deploy my website to production” to push it live. Your URL stays the same.

You just built something real.

A live website on the internet, built by you, with no prior coding experience. This is exactly what it looks like to start building a real online presence with AI.

Support Each Other

Show the world what you built

You just built a real website with AI. That is worth sharing. Do all three of these before the next session.

Post your website in the Masterminds group

Drop your live URL in the group chat. Click every link that gets posted and tell them what stood out. Real feedback from real people means everything at this stage.

Share it on your story

Instagram, WhatsApp, Facebook — wherever your people are. Take a screenshot of your live website and post it as a story with your link. You built this. Let people see it.

Tag Joe so he can share it

Tag @joe.che.official in your post or story. He wants to see what you built, celebrate it with you, and share it with his audience so more people see your work.

Challenge

Share your live website URL in the Masterminds group before the next session.

Prep Requirements All Sessions