Lesson 37 of 1570
Building a Small Web Page With AI Assistance
Let's make something real. A single-page site with HTML, CSS, and a little interactivity. You plan, the AI drafts, you review and ship.
Lesson map
What this lesson covers
Learning path
The main moves in order
- 1The Smallest Real Website
- 2HTML
- 3CSS
- 4JavaScript
Concept cluster
Terms to connect while reading
Section 1
The Smallest Real Website
Every website on the internet is, at its core, three files: HTML for structure, CSS for style, JavaScript for behavior. You are going to build a single-page site about a topic you care about, with AI as your pair. The goal is not perfection. The goal is a real link you can share.
The plan before the prompt
- 1Pick a topic: a hobby, a band, a sport, a dream project
- 2Sketch three sections on paper: header, main content, footer
- 3List the colors you want in two words (warm, cool, neon, etc.)
- 4Write down one interactive feature (a button that changes text, a form, a hover effect)
The starter prompt
A specific, testable brief. Notice the constraints — one file, responsive, named button behavior.
Build me a single-file HTML page about my favorite sport, skateboarding.
Requirements:
- Header with the title "Skate Life" and a tagline.
- Three sections: About Me, Favorite Tricks, Gear I Use.
- A button under each section that toggles an extra paragraph of detail.
- Dark background, neon green accents, big friendly sans-serif font.
- All HTML, CSS, and JS in one file named index.html.
- Responsive: looks good on a phone and a laptop.What to check in the draft
- Does every section exist with the right heading?
- Does the button actually toggle, or is it just styled?
- Does it look good on your phone when you resize the window?
- Are the colors the ones you asked for?
The polish loop
A trimmed version of what the AI might produce. Short, complete, and ready to customize.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Skate Life</title>
<style>
body { background: #0a0a0a; color: #eaeaea; font-family: sans-serif; margin: 0; padding: 2rem; }
h1 { color: #39ff14; }
.toggle { background: none; border: 1px solid #39ff14; color: #39ff14; padding: 0.5rem 1rem; cursor: pointer; }
.hidden { display: none; }
</style>
</head>
<body>
<h1>Skate Life</h1>
<p>Four wheels, one story.</p>
<section>
<h2>About Me</h2>
<button class="toggle" onclick="toggle('about')">More</button>
<p id="about" class="hidden">I've been skating since I was 10...</p>
</section>
<script>
function toggle(id) {
document.getElementById(id).classList.toggle('hidden');
}
</script>
</body>
</html>Ship it for real
- 1Create a new repo on GitHub
- 2Commit your index.html and push
- 3Enable GitHub Pages under repo Settings → Pages
- 4Your site is now live at username.github.io/repo-name
“The first site you publish is a bigger leap than the hundred you publish after.”
Key terms in this lesson
The big idea: real projects are small commitments, not big dreams. A single HTML file, a single working button, a single public URL. That is enough to be a builder.
End-of-lesson quiz
Check what stuck
15 questions · Score saves to your progress.
Tutor
Curious about “Building a Small Web Page With AI Assistance”?
Ask anything about this lesson. I’ll answer using just what you’re reading — short, friendly, grounded.
Progress saved locally in this browser. Sign in to sync across devices.
Related lessons
Keep going
Builders · 25 min
What Does AI-Assisted Coding Even Mean?
AI-assisted coding is not magic and not cheating. It is a new way of working where a model drafts, you decide. Let's draw a map before we start building.
Builders · 30 min
Your First Copilot-Style Completion
Let's actually feel what autocomplete is like. Write a comment, pause, and watch a full function appear. Then learn what to do next.
Builders · 30 min
Prompting for Code Is Different From Prompting for Prose
A prompt that writes a poem is not the same as a prompt that ships working code. Code has hidden standards. You need to make them explicit.