§1The idea
How it went
Nothing existed yet. Just an idea for a stupid webpage about a meme. I wanted a single page that felt like the moment somebody says like 6… 7.
No code, no website, nothing yet. Just an idea and a closed laptop.
One web page that, when you opened it, felt like the meme. Big glowing “6 7” numbers in the middle. Confetti. Color. Noise. Nothing useful. Just chaos pointed at a single moment.
A self-contained index.html — markup, styles, and scripts all in one file. No assembly step before it could run (a “build step”), and no extra library like React to install first (a “framework”). Something I could double-click on my own machine and have the whole site running locally before anything else got involved.
There's a pile of background knowledge baked into even the first sentence I typed. I knew that webpages are made of code called HyperText Markup Language (HTML). I knew that the code lives in a file you can save and open. I knew an AI chat could write that code, not just talk about it.
None of those are obvious if no one has ever told you. The whole tutorial below is paced to a reader who is finding out about each of them as they appear.
HTML / CSS / JS basics. That JSFiddle exists as a place to paste-and-run. That LLMs iterate well in conversation — they get better when you say what's wrong. That plain-English prompts work; you don't have to “write code” to ask for code.
I told the AI: make me a crazy 6–7 animation webpage. Big numbers, vibrant, more chaos than makes sense. Then I tried what it built, said what was off, and asked for fixes. Over and over. Each round was just a few words.
> I want a 6 7 animation. Something big, vibrant and crazy. Reflecting the meme.
> That's pretty good, can we add anything else to the chaos?
> Make all the hypeText, rare. Let's get rid of the More Chaos button.
A working webpage. Big numbers in the middle, glowing colors behind them, raining emojis, hype text that flashes once in a while. I could see it run on the screen, try it, and ask for changes. By the end of the conversation, the page was the page.
One HTML file (~200 lines) with embedded <style> and <script>. About ten prompts of iteration. Previewed live in JSFiddle, then the final result was saved as a local file. The first git commit doesn't happen until §2.
Concepts introduced in this section
HTML
HyperText Markup Language. The code that tells a browser what's on a webpage — headings, paragraphs, images, buttons. It's just text in a file, with little tags wrapped around the parts.
Example: <h1>Hello</h1> makes the word Hello show up as a big heading.
CSS
Cascading Style Sheets. The code that tells the browser how the page should look — colors, sizes, fonts, animations.
Example: h1 { color: hotpink; } turns every <h1> heading hot pink.
JavaScript
The code that lets a webpage do things — react to clicks, change over time, run animations, respond to the user.
Example: a button that, when clicked, makes confetti fall down the screen.
prompt
What you type to an AI. The clearer and more specific you are, the better the answer. You can iterate — say what's wrong, ask for a change, get a new version.
Example: “Make the numbers bigger and add more emojis.”
iteration loop
The cycle of: ask for something → see what came back → say what's wrong or what you want next → repeat. Most of building with AI is iteration, not one giant prompt.
JSFiddle
A free website where you can paste HTML, CSS, and JS into three boxes and see your webpage run live in a fourth. Useful for testing before you save anything to a file.
It lives at jsfiddle.net.
Tools I used
ChatGPT for generation · JSFiddle for live preview · any plain text editor (TextEdit, Notepad, VS Code) for saving the file.
Commands I ran
None this section — entirely chat & copy-paste. The terminal first appears in §2.
Questions to try
- “What's the dumbest possible webpage I could make about [a thing I love]?”
- “Make me a single HTML file that animates the words [my idea] in a fun way.”
- “I'm a total beginner — what is HTML, in plain English?”