Session Two

Building Your First Website with AI

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

Table of Contents

1Part A — Set Up and Build Your Page
2Part B — Add Visual Effects
3Part 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 Claude Code

Claude Code 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

Install Claude Code

Copy the command below and paste it into your terminal. Then press Enter and wait for it to finish. You will see text moving across the screen. That is normal. It is done when you see the prompt symbol $ or > again.

Terminal

curl -fsSL https://claude.ai/install.sh | bash

Note

This is the official installer from Anthropic. It downloads and installs everything Claude Code needs automatically. No other software required.

Run Claude Code for the first time

After the installer finishes, close and reopen your terminal. Then type:

Terminal

claude

The first time you run it, Claude Code will walk you through a few screens:

1.It will ask you to accept the Terms of Service. Type y and press Enter
2.Your browser will open automatically. If it does not, look for a link in the terminal and click it
3.Log in with the same email and password you use at claude.ai. Click Authorize when prompted
4.Return to your terminal. You should see a welcome message and a blinking cursor ready for instructions

Pro Tip

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

Always start Claude Code this way

Every time you open Claude Code, use this command instead of just typing claude. It skips the permission prompts so you are not clicking through confirmation screens every few seconds.

Terminal

claude --dangerously-skip-permissions

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: curl”

This is very rare on modern systems. On Mac, open Terminal and it should already be available. On Windows, make sure you are using Command Prompt or PowerShell, not an older terminal.

“command not found: claude”

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.

“Missing billing information” or “Subscription required”

Claude Code requires a paid Claude plan (Pro, Max, Teams, or Enterprise). Log in at claude.ai and confirm your subscription is active.

The browser did not open during login

Look in your terminal for a URL that starts with https://claude.ai/auth... 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 Claude Code

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

Terminal

claude --dangerously-skip-permissions

Once Claude Code is running, paste this in:

Claude Code prompt

Create me a folder called my new website and tell me the path to where you just put it.

Pro Tip

When Claude Code 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.

Set Up Your Web Design Toolkit

Bonus

This single prompt installs 24 of the best web design tools and animation libraries so your AI builds genuinely gorgeous websites from the start.

Claude Code prompt

Set up my professional web design toolkit so I can
build incredibly gorgeous websites fast.

Step 1 -- Install Claude Code design skills:
git clone https://github.com/anthropics/frontend-design ~/.claude/skills/frontend-design
git clone https://github.com/Koomook/claude-frontend-skills ~/.claude/skills/claude-frontend-skills
git clone https://github.com/greensock/gsap-skills ~/.claude/skills/gsap-skills
git clone https://github.com/Dammyjay93/interface-design ~/.claude/skills/interface-design
git clone https://github.com/Owl-Listener/designer-skills ~/.claude/skills/designer-skills
git clone https://github.com/freshtechbro/claudedesignskills ~/.claude/skills/claudedesignskills

Step 2 -- Install mobile-first and responsive skills:
git clone https://github.com/szilu/ux-designer-skill ~/.claude/skills/ux-designer
git clone https://github.com/HermeticOrmus/LibreUIUX-Claude-Code ~/.claude/skills/libreUIUX

Step 3 -- Install animation and effects libraries:
npm install gsap lenis framer-motion animejs \
  @formkit/auto-animate split-type typed.js \
  countup.js canvas-confetti tsparticles \
  vanta three @barba/core scrollreveal aos vivus

Step 4 -- Confirm and quick-start:
When complete, show me a quick-start example:
add smooth scroll and an animated text reveal
to a hero section for a landing page.

Run this from inside your website project folder. Every library links to its GitHub page on the Web Design Arsenal page where you can review everything before installing.

Build your personal brand page

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

Pro Tip

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

Claude Code prompt

Edit before copying

Once Claude 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 Claude 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.

Claude Code prompt

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.

Claude Code prompt

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. Claude 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 Claude Code to deploy. It will handle everything including logging into Vercel and pushing your files live.

Claude Code prompt

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 Claude to place your photo on the page. Edit the file name below if yours is different.

Claude Code prompt

Edit before copying

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

Claude Code prompt

Deploy my website to production.

Customize and explore

Now it is yours. There are no wrong moves. Try asking Claude 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 Claude “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.

Using Codex instead of Claude Code? Codex version of this page

Prep Requirements All Sessions