AcademyLv 1 · 0AcademyLv 1 · 0HTML, CSS & JS in 20 minutes
20 min · up to 80 XP
The skeleton, the skin, and the brain: enough of each to read what your AI writes.
Sam asks her AI for a simple page (a reading list, nothing fancy) and gets back sixty lines of... something. Angle brackets. Curly braces. A word that's definitely English (button) next to one that definitely isn't (addEventListener). Her honest first reaction: close the laptop, become a florist.
Then the AI says something that changes everything.
Check your intuition
"It's not one language," says the AI. "It's three, and each one only does one job." Sixty lines of code in front of you. Before anyone explains anything: what do you reckon the three jobs are?
Language one: HTML, the skeleton. It doesn't make anything pretty or make anything do anything. It declares what things are, this is a heading, this is a paragraph, this is a button, using tags: labels in angle brackets that wrap content. <h1>Sam's Reading List</h1> opens with <h1> and closes with </h1>, same name, added slash.
Enough theory. The editor below is live, the page on the right is your page. Change the code, watch it change. That's the loop you'll run with your AI forever: read → change → see.
Write real HTML
Your first real HTML. Make this page Sam's: complete the three goals below, the preview updates as you type, and the checklist ticks itself.
<h1> tags)<strong> tags<button> that says Add a book on a new line at the bottomLanguage two: CSS, the skin. Your page works, but it looks like a tax form. CSS is the language of appearance: colours, sizes, spacing, fonts. It reads like a wardrobe instruction, select something, then list its styles. .add { background: gold; } means: find everything with the class "add", paint its background gold.
Your tell for "I'm reading CSS": curly braces full of `property: value;` pairs, colon in the middle, semicolon at the end. Sam's button is on the operating table below. Make it look like something people want to click.
Write real CSS
This is real CSS styling the button on the right. Three goals, and feel free to play beyond them: change the padding, try background: hotpink, break things. The reset button forgives everything.
.add a background of #fbbf24border-radius (try 8px)cursor: pointerLanguage three: JavaScript, the brain. Your button looks clickable now, but clicking it still does nothing. JavaScript is the language of behaviour, when this happens, do that, and it's the only one of the three with moving parts: variables that remember things, event listeners that wait for things to happen.
Two patterns unlock most beginner JavaScript: button.addEventListener("click", ...), when the button is clicked, run this code, and count.textContent = ..., change the text inside that element. Time to give Sam's button a brain. This one's a step up, lean on the hints.
Write real JS
The page on the right has a button and a counter, already connected to the variables button, count and books. Write the three missing lines where the comment is, then click your button in the preview and watch it actually work.
books (try books = books + 1;)count.textContent to the new totalDrag the labels
Reading fluency check. Here are six lines straight out of AI-generated code. Drag each one onto the language it belongs to. No syntax memorisation, just: is it declaring structure, describing style, or defining behaviour?
Drag each label onto its home, or tap a label, then tap a card.
HTML, skeleton
Declares what things ARE
CSS, skin
Describes how things LOOK
JavaScript, brain
Defines what things DO
One last skill before the recap: when AI-generated code breaks, it usually breaks quietly.
The browser doesn't show error messages for most HTML mistakes, it just guesses what you meant and renders its best guess. Which means your eyes are the error detector. Sam hit exactly this yesterday: she retyped one line of the AI's HTML by hand, and everything below it scrambled.
Spot the bug
One tag on this page has the wrong closing partner, and it's scrambling the layout below "This month". Find the line.
Click the line you think is wrong.
1<main>2 <h1>Sam's Reading List</h1>3 <p>Three books I actually finished.</p>4 <h2>This month</p>5 <button>Add a book</button>6</main>
From today, when your AI generates code, play the game you just played: skim it and name the language of each chunk, skeleton, skin, or brain? Ask the AI to explain any line that resists. Thirty seconds of reading per generation is what separates directing from hoping.
Key takeaways
property: value; pairs inside curly braces. Same skeleton, any skin.