🚀 From Code to Website in 90 Minutes

Use AI to build a real website—no experience needed!

⏱️ Total time: ~90 minutes

What You'll Do Today

By the end of this workshop, you'll have a real website on the internet that anyone can visit!

Create GitHub Repo → Ask AI to Write Code → Save & Upload → Publish Website!

Phase 1 Set Up Your GitHub Repository ~15 min

A "repository" (or "repo") is like a folder on GitHub that stores your project files.

Step 1.1 — Create a New Repository

1

Go to GitHub and sign in:

Open GitHub →
2

Click the + icon in the top-right corner, then click "New repository"

3

Fill in the details:

  • Repository name: my-first-website (or choose your own!)
  • Description: "My first website built with AI" (optional)
  • Public ← Select this (required for free websites)
  • ☑️ Add a README file ← Check this box!
4

Click the green "Create repository" button

✓ Checkpoint: You should now see your new repository page with a README.md file!

Step 1.2 — Create a Personal Access Token (Your Password for Git)

GitHub needs a special password called a "token" to let you upload code from your computer.

1

Go to GitHub's token settings:

Open Token Settings →
2

Click "Generate new token" → "Generate new token (classic)"

3

Fill in the settings:

  • Note: School laptop Git access
  • Expiration: 90 days (or "Custom" → end of semester)
  • Select scopes: Check the box for ☑️ repo (this gives full access to your repositories)
4

Scroll down and click "Generate token"

5

IMPORTANT: Copy the token immediately! It starts with ghp_

Paste it somewhere safe (a text file, your notes app, etc.)

⚠️ You can only see this token ONCE! If you lose it, you'll have to create a new one. Save it now!

Step 1.3 — Clone Your Repository

"Cloning" downloads your GitHub repository to your computer so you can add files to it.

1

On your repository page, click the green "<> Code" button

Copy the HTTPS URL (it looks like https://github.com/yourusername/my-first-website.git)

2

Open Git Bash (from your PortableGit folder, double-click git-bash.exe)

3

Navigate to your Documents folder:

cd ~/Documents
4

Clone your repository (replace the URL with yours):

git clone https://github.com/YOUR-USERNAME/my-first-website.git
5

Enter your project folder:

cd my-first-website
✓ Checkpoint: Type ls and press Enter. You should see README.md listed!

Phase 2 Generate Your Website with Claude AI ~25 min

Step 2.1 — Open Claude AI

1

Go to Claude and sign in (create an account if needed):

Open Claude AI →
2

Click "New chat" to start a conversation

💡 Name your conversation! Click on the chat title at the top and rename it to something like "My Website Project" so you can find it later.

Step 2.2 — Choose Your Project

Pick ONE project that sounds fun to you! Each includes a ready-to-use prompt.

🪪 About Me Card

A stylish personal profile card with your name, interests, and links

🎯 Interactive Quiz

"Which character are you?" style personality quiz

🎲 Random Generator

Generate random compliments, excuses, jokes, or ideas

⏱️ Countdown Timer

Count down to summer, graduation, or any event

🎮 Click Game

A simple reaction speed or click counter game

Step 2.3 — Copy and Customize Your Prompt

Find your chosen project below. Fill in the yellow blanks, then copy the entire prompt and paste it into Claude.

🪪 About Me Card — Prompt Template

Create a single HTML file with embedded CSS and JavaScript for a personal "About Me" card webpage.

About me:
• Name: [Your name]
• Grade/Role: [e.g., Junior at Lincoln High]
• 3 interests/hobbies: [e.g., basketball, anime, cooking]
• Favorite quote or motto: [e.g., "Stay curious"]
• Color scheme: [e.g., dark mode with purple accents]

Features I want:
• Hover effects on the card
• Smooth animations when the page loads
• Links to my social media (use # as placeholder links)
• Looks good on phones and computers

Put ALL code in one HTML file. Make it visually impressive!

Make it yours: Add your favorite emoji, change the shape of the card, request a specific font style, add a "fun facts" section!

🎯 Interactive Quiz — Prompt Template

Create a single HTML file with embedded CSS and JavaScript for a "Which [topic] Are You?" personality quiz.

Quiz details:
• Topic: [e.g., anime character, pizza topping, superpower, music genre]
• Number of questions: 5
• Number of possible results: 4
• Vibe/theme: [e.g., fun and colorful, mysterious dark mode, retro arcade]

Features I want:
• One question shown at a time
• Progress bar showing how far along I am
• Animated reveal of the final result
• A "retake quiz" button at the end
• Looks good on phones

Put ALL code in one HTML file. Make the questions fun and the results entertaining!

Ideas: "Which School Subject Are You?", "Which Fast Food Item Matches Your Personality?", "What Season Is Your Vibe?"

🎲 Random Generator — Prompt Template

Create a single HTML file with embedded CSS and JavaScript for a random [thing] generator.

Generator details:
• What it generates: [e.g., compliments, excuses for late homework, pickup lines, shower thoughts, video game ideas]
• Tone: [e.g., funny, wholesome, sarcastic, dramatic]
• Color scheme: [e.g., bright and playful, minimalist black and white]

Features I want:
• Big button to generate new content
• Satisfying animation when new content appears
• At least 20 different options to randomly choose from
• A "copy to clipboard" button
• Looks good on phones

Put ALL code in one HTML file. Make it fun to click over and over!

Ideas: Motivational quotes generator, random date ideas, "What should I draw?" prompt generator, band name generator!

⏱️ Countdown Timer — Prompt Template

Create a single HTML file with embedded CSS and JavaScript for a countdown timer to [event].

Countdown details:
• Event name: [e.g., Summer Break, Graduation, My Birthday]
• Target date: [e.g., June 15, 2025]
• Theme: [e.g., beach vibes, space theme, party celebration]

Features I want:
• Shows days, hours, minutes, and seconds
• Numbers animate when they change
• Cool background (gradient, pattern, or subtle animation)
• A fun message or animation when the countdown hits zero
• Looks good on phones

Put ALL code in one HTML file. Make it exciting to watch!

Ideas: Add falling confetti, show a motivational message below the timer, change colors as it gets closer!

🎮 Click Game — Prompt Template

Create a single HTML file with embedded CSS and JavaScript for a [game type] clicking game.

Game details:
• Game type: [e.g., "click as fast as you can in 10 seconds", "hit the moving target", "reaction time test"]
• Visual theme: [e.g., arcade retro, neon glow, cute animals]

Features I want:
• Score counter
• High score that saves during the session
• Sound effects or visual feedback on clicks
• Start and restart buttons
• Looks good on phones

Put ALL code in one HTML file. Make it addictive!

Ideas: Whack-a-mole style game, cookie clicker, speed typing test, memory card matching!

⚠️ Prompt Budget Reminder: You have limited free messages on Claude. Make your first prompt detailed to get good results!

Step 2.4 — Save the Code to a File

Claude will respond with HTML code. Now let's turn it into a real file!

1

Look for the code block in Claude's response (it has a gray background)

Click the "Copy" button in the top-right corner of the code block

2

Open Notepad on your computer:

  • Press the Windows key
  • Type "Notepad"
  • Press Enter
3

Paste the code into Notepad (Ctrl + V)

4

Save the file correctly:

  • Press Ctrl + S (or File → Save)
  • Navigate to: Documents → my-first-website folder
  • Change "Save as type" to: All Files (*.*)
  • File name: index.html
  • Click Save
⚠️ IMPORTANT: The file MUST be named index.html (not index.html.txt). Make sure "Save as type" is set to "All Files"!
💡 Test it locally first! Open File Explorer, go to your project folder, and double-click index.html. It should open in your browser!

Phase 3 Upload to GitHub ~10 min

Now let's upload your website to GitHub using the Git commands!

1

In Git Bash, make sure you're in your project folder:

cd ~/Documents/my-first-website
2

Stage your files (tell Git which files to save):

git add .

The dot means "all files in this folder"

3

Commit your changes (save a snapshot with a message):

git commit -m "Add my first website"
4

Push to GitHub (upload to the internet):

git push
5

When asked for credentials:

  • Username: Type your GitHub username, press Enter
  • Password: Paste your Personal Access Token (right-click to paste in Git Bash), press Enter

Note: You won't see the password as you paste it—that's normal!

✓ Checkpoint: Go to your repository on GitHub and refresh the page. You should see index.html listed!

Phase 4 Publish with GitHub Pages ~10 min

GitHub Pages turns your repository into a free website!

1

On your GitHub repository page, click "Settings" (tab near the top)

2

In the left sidebar, click "Pages"

3

Under "Branch", change "None" to "main"

Leave the folder as "/ (root)"

Click "Save"

4

Wait 1-3 minutes for GitHub to build your site

Refresh the Settings → Pages page. You'll see a green box with your URL!

🎉 Your website is LIVE! Your URL will look like this:
https://your-username.github.io/my-first-website/
💡 While you wait: Share your URL with classmates! Ask what projects they chose. Compare your designs!

Phase 5 Round 2 — Customize & Improve! ~20 min

Your site is live, but why stop there? Let's make it even better!

Ideas for Modifications

Ask Claude to help you with any of these:

🎨 Change the color scheme
✨ Add more animations
🔤 Use a different font
📱 Make buttons bigger for phones
🖼️ Add an image or emoji background
🔊 Add sound effects
🌙 Add dark mode toggle
💫 Add particle effects
📊 Add a statistics section
🔗 Add social share buttons

How to Ask for Changes

Go back to your Claude conversation and try prompts like:

Can you modify the code to [describe what you want]?

Please give me the complete updated HTML file.

Example prompts:

Uploading Your Changes

After updating your index.html file in Notepad, push the changes:

git add . git commit -m "Updated colors and added animations" git push

Wait 1-2 minutes, then refresh your live website to see the changes!

💡 Pro tip: Write descriptive commit messages! Instead of "updated stuff", write "Changed background to gradient and added hover effects"

✅ Final Checklist

🔧 Troubleshooting

My website shows a 404 error

Git says "Permission denied"

My file saved as .txt instead of .html

Git says "nothing to commit"

🎉 Congratulations!

You just built and deployed a real website using AI assistance!

Quick Links:
Claude AI • GitHub • Download Portable Git