Hello, you.
A tiny input can change what a page says.
Hello, future developer! 👋
What’s happening here?
JavaScript reads the input and updates the greeting. Find textContent in script.js.
A LITTLE EXPERIMENT. A REAL FIRST PROJECT.
Small clicks.
Big beginnings.
You don’t need to know everything to build something. Try the buttons, make a change, and see what happens.
Let’s have a playTHE PLAYGROUND
Go on. Try something.
No downloads. No wrong turns.
A splash of colour.
Same page. A different feeling. Pick an accent.
A little gold goes a long way.
What’s happening here?
CSS variables hold the colours. JavaScript changes them when you choose a button.
One click at a time.
Meet a variable: a place to store a value.
0
Every click adds one. Try reaching 10!
What’s happening here?
let count = 0 stores the number. Each click increases it, then updates the page.
Who does what?
Which language adds behaviour, like making these buttons work?
Take a guess. You can try again.
Need a hint?
HTML creates the structure. CSS styles it. JavaScript responds to your actions.
NOW MAKE IT YOURS
Three files. Plenty of possibilities.
index.htmlThe content
Change the main heading to your own welcome message.
style.cssThe look
Find --accent and experiment with a different colour.
script.jsThe behaviour
Change count += 1 to count += 2. What happens?
Your first challenge: change one thing, save the file, then refresh the page.