HTML Lesson 1 — Bouncing Ball

HTML

Simple Bouncing Ball

“Watch a blue ball bounce forever. Smooth. Calm. Mesmerizing.”

⏱ About 5 minutes 🛠 Notepad + browser ⭐ Lesson 1 of 3

What you will have

An 800×400 canvas with a ball that bounces off all four walls — running live in your browser.

ball.html — live preview

This is exactly what you will build. You will not type a single line of code.

Video walkthrough

Prefer to watch? Follow along with the full video.

Watch Greg build the bouncing ball live — copying the prompt, pasting into ChatGPT, running the code, and making the Vibe Tweak. Pause and rewind as many times as you need.

Enjoying the videos? Subscribe on YouTube for every new lesson →

Your prompt

Copy this. Paste it into your AI. That’s your only job.

Open ChatGPT, Claude, or DeepSeek. Start a new chat. Paste the prompt below exactly as written and hit Enter.

📋 Your Prompt — Copy Everything Below

Create a single HTML file with a canvas (800×400, black border). A blue ball (radius 15) moves and bounces realistically off all four walls. Use requestAnimationFrame for smooth animation. Include basic comments explaining the key parts.

✅ Copied! Now paste it into your AI.

What to do after

Follow these steps exactly.

Copy all the code the AI gives you

The AI will write a full block of code. Select all of it and copy it — Ctrl+A then Ctrl+C works well.

Open Notepad

Press the Windows key, type Notepad, and open it. You’ll see a blank white page.

Paste the code in

Click inside Notepad and press Ctrl+V. The code will appear. It might look complicated — that’s fine. You don’t need to understand it yet.

Save it as a .html file

Go to File → Save As. Change “Save as type” to All Files. Name the file ball.html — the .html part is important. Save it somewhere easy to find like your Desktop.

Open it in your browser

Find ball.html on your Desktop. Double-click it. Your browser will open and you’ll see the ball bouncing. That’s yours. You built that.

🛠️ Didn’t work?

Don’t panic — this is part of vibe coding. Here’s exactly what to do:

1 Copy the error message you see on screen

2 Go back to your AI chat

3 Type: “This didn’t work. Here’s the error: [paste it]. Please fix it.”

The AI will fix it. You just used AI the way professional developers do every single day.

Vibe Tweak

Now make it yours.

Open ball.html in Notepad. Find the number 15 — that’s the ball’s radius. Change it to 50. Save the file. Refresh your browser.

Your ball is now massive. You just modified code. That’s you in control.

Find this

radius = 15

→

Change to this

radius = 50

Extra Credit

Want to go further?

Go back to your AI and paste this:

📋 Extra Credit Prompt

Change the ball to cycle through rainbow colors as it moves. Keep everything else exactly the same.

✅ Copied!

Reflection

Before you move on — think about this.

“What did it feel like to get a working animation without typing a single line of code yourself? Look at the code in Notepad — can you find the line that controls the ball’s speed?”

You don’t need to answer out loud. Just notice. That noticing is where real learning starts.

Up next

HTML Lesson 1.2 — Add Paddle Controls

You’re in control now. Add a paddle that moves with your arrow keys. The ball bounces off it.

Next Lesson →