Learn HTML, CSS & JavaScript — and build your first website!
A Koinder Global Limited production
Here's a secret: computers are actually a little bit... simple! A computer can't understand words or pictures directly. It can only understand ON and OFF — like a light switch. That's it. Just two things.
We call ON a 1 and OFF a 0. This ON/OFF language is called binary (bi- means "two," like a bicycle has two wheels).
So how does a computer show letters, colors, and games with only 0s and 1s? It uses lots of switches together! Eight switches in a row is called a byte, and different patterns of 0s and 1s stand for different letters and numbers — like a secret code.
Try the Binary Playground below the lesson to flip switches yourself and turn your own name into 0s and 1s — the exact same code a computer sees!
This is the very bottom of computers — and everything else (HTML, CSS, JavaScript, even Python) is really just a friendlier way for us to "speak" to the computer, which then quietly turns our words into binary underneath. Learning to code is like learning a new language so you and the computer can finally understand each other!
👉 Scroll down to the Story Playground — flip the big switch (or press play to listen!) to see the very first ON/OFF moment come to life. ✨
John Bardeen
Co-invented the transistor — the tiny switch inside every computer.
Walter Brattain
Built the very first working transistor with his teammates in 1947.
William Shockley
Led the team and helped turn the idea into a real, working switch.
All three won the Nobel Prize in Physics in 1956 for this tiny invention that changed the whole world! 🏅
Jack Kilby
Built the first chip — many switches squeezed onto one tiny piece.
Robert Noyce
Invented his own version separately, without knowing about Kilby's!
🤔 So now you know how computers think... but do you know how to actually build something they'll show the whole world?
Right now, all you have is knowledge. HTML, CSS, and JavaScript are what turn that knowledge into a real website — one you build yourself, with your own hands, that anyone can visit.
Bobo's body (HTML) never changes — but his clothes (CSS) and his movement (JavaScript) do, every time you click something below!
💻 Here's the real code behind what you just did:
Click a color or movement above to see the code!
Click the switches to turn bits ON and OFF! We use O (off) and I (on) here — that's actually where the real power button symbol ⏻ on every device comes from: an O and an I squashed together!
Now try turning your name into binary:
Flip the big switch to bring the story to life — or press play to just listen!
Before anything existed, the earth had no shape and was completely empty, and darkness covered everything. It was all OFF. Nothing was happening. Everything was 0.
Remember Bob Bemer and his team agreeing that "A" means 65? You're about to do the exact same thing — invent your own table where YOUR words mean actions, just like a real inventor!
Now type your invented words below (one per line or separated by spaces), then press Run:
Follow your words on their journey through a real computer!
A text editor — where you type your instructions, then press Run.
A Terminal — type a command straight to the computer, no Run button needed.
A cable — 0s and 1s race through as tiny electrical pulses, billions per second.
You already know computers only understand 0s and 1s — so how does a computer store a letter like "A"? Simple: every letter secretly has its own number! It's called ASCII, and it's like a decoder ring that every computer in the world agreed to use.
Bob Bemer
Pushed hard for one shared code and shaped much of how ASCII was designed. Many call him "the father of ASCII."
A Whole Committee
Bob didn't do it alone — a whole team of engineers at an American standards group debated and agreed on every single number together.
Once a letter becomes a number, that number becomes binary — exactly the same way your name did in the Binary Playground above. Letters → Numbers → Binary — that's the whole secret!
✍️ Type your name below and watch it light up in the table above!
💬 Now try telling the computer a whole sentence — anything you want to say!
🧮 Fun fact: a byte (8 switches) can only go up to 255 — that's what happens when all 8 switches are flipped ON at once (11111111)!
🌟 You've now seen how computers think, met the people who invented the switch, the chip, and the secret code — that's real, deep knowledge most people never get.
You've had a real taste of what Kodi can teach you. Ready to go further and actually build with HTML, CSS & JavaScript?
🎉 You've just learned how computers think, met the people who invented the switch and the secret code — that's real, deep knowledge!
Ready to actually build with HTML, CSS & JavaScript? Or keep sharpening your mind with Math Mastery.
Kodi's Code Clubhouse is produced by Koinder Global Limited. Koinder Global Limited is licensed by the FCT Department of Mass Education to provide vocational skills training and run Non-Formal Education programmes.
Lead Tutor & Curriculum Developer: Glory N. Nweke