HTML is nouns. CSS is adjectives. JavaScript is verbs.
You've built the nouns (Module 01) and the adjectives (Module 02). Your page has things, and those things have looks. What it can't do yet is happen — nothing on the page can respond to you.
JavaScript is the third language your page speaks. It's the verbs — the part that makes the page do things.
Nouns
the things
Adjectives
the looks
Verbs
the happenings
Every real webpage in the world is built from these three. Once you've written a bit of each, you've seen the whole shape of how the web works. You're not learning "the basics." You're learning the entire foundation.
What will your page do?
Pick one verb. Not a big complicated feature — one simple thing that responds to a click or a type. In the editor you'll build that exact verb with real code.
These six cover most of what beginners build in their first year of JS. If you pick "greeter" now, you can build "counter" later — same tools.
Four JavaScript moves do 80% of the work.
JavaScript is famously enormous. You don't need most of it. Four moves cover almost every real interaction you'll build in your first year of coding. Here they are.
Find something on the page
Grab an element from your HTML so JavaScript can work with it. The element needs an id, and you ask for it by name.
Listen for something to happen
Tell JavaScript "when this thing gets clicked (or typed in), run this code." This is how pages respond to people.
// your code here
});
Change something on the page
Once you have an element, you can change what's inside it (textContent), what class it has, or almost anything else.
Remember a value
Store a number or word so you can change it later. These are called variables. let means "this might change later."
count = count + 1;
Almost every interaction you've ever clicked on a website is some combination of these four: find, listen, change, remember. Find the button. Listen for a click. Change the page. Remember the new state. Four verbs. That's the whole shape.
Here's a complete page with JavaScript.
A counter, built from scratch. HTML at the top, CSS in the middle, JavaScript at the bottom. All in one file. Notice how you can see all four moves from the last step working together.
<!DOCTYPE html> <html> <head> <title>My Counter</title> <style> body { font-family: Georgia, serif; padding: 40px; text-align: center; } button { font-size: 1.2rem; padding: 12px 24px; cursor: pointer; } #count { font-size: 4rem; margin: 20px 0; } </style> </head> <body> <h1>How many times have I clicked?</h1> <p id="count">0</p> <button id="click-me">Click me</button> <script> // 1. Find the things we care about const countEl = document.getElementById("count"); const button = document.getElementById("click-me"); // 2. Remember a value let count = 0; // 3. Listen for clicks button.addEventListener("click", function() { // 4. Change the page count = count + 1; countEl.textContent = count; }); </script> </body> </html>
Read the comments in the script section. It's the four moves in order: find two elements, remember a starting count, listen for clicks, and on each click change both the variable and the page. That's real JavaScript. That's the whole counter.
Save this file as counter.html
anywhere on your computer. Double-click to open. The button works.
You just wrote an interactive webpage.
Type it. Click it. Watch it work.
A real editor with real JavaScript running in a real browser. Your verb (—) is preloaded. Switch between the six demos using the buttons, or write your own from scratch.
When you like it, copy the code and save it as anything.html. Double-click the file — your interactive page opens in the browser. No server, no installation.
Not every page needs JavaScript.
The hardest thing about learning JavaScript isn't writing it — it's knowing when not to. Two rounds of judgment.
Round 1. A kid is building a page about their book collection. They want it to "feel alive." Which is the better use of JavaScript?
Round 2. A kid wants to show their favorite quote on a page. Which design is better?
JavaScript is for things the user actively does. If the page is just information the user reads, JavaScript is usually making it worse, not better. The question isn't "can I add JS?" — it's "will this action make the page more useful for the person looking at it?"
Your page can do things now.
Not just display information — actually respond. That's real software, and you just wrote it.
What you just learned
- HTML is nouns, CSS is adjectives, JavaScript is verbs.
- Four moves do 80% of real JS: find, listen, change, remember.
- Every interaction on every website is some combination of those four.
- Elements need an
idso JavaScript can find them. addEventListener("click", ...)is how you respond to clicks.- Not every page needs JavaScript. A page that only displays information should usually stay pure HTML + CSS.
- JavaScript is for doing, not for decoration.
In Module 04 — the last Makers module in Code Club — you'll put your page on the actual internet. A real URL. Strangers can visit it. That's the moment your page stops being a file on your computer and becomes something in the world.
★ Before you call it done
Three questions. Same three. Every time.
These are the same three questions for every module in Kindling. They are how you check whether AI did the part it should and you did the part only you could. Tap each one to mark it true.
★ ★ ★