Lesson 37 of 1455
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.
Builders · AI-Assisted Coding · ~27 min read
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
8 questions · Score saves to your progress.
Lesson help
Questions are best handled with a grown-up here.
For this age range, Tendril keeps freeform AI chat paused until parent/guardian consent and child-safe moderation are fully verified. Use the quiz, notes, and related lessons below, or ask a parent, guardian, teacher, or librarian to work through the question with you.
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.