Learn HTML, CSS & JavaScript — and build your first website!
A Koinder Global Limited production
Ready to actually build a website?
Right now you've only learned about code. Unlock to start building with it.
₦10,000/month
🧱 Full HTML, CSS & JavaScript lessons
💬 Unlimited questions to Kodi every day
🏗️ Bonus course: Build-a-Website Project
🐍 Bonus course: Intro to Python
🎓 A certificate when your child finishes
🔒
This lesson is part of Kodi Premium
Unlock unlimited access to HTML, CSS, JavaScript, the Website Project, Python, and unlimited questions to Kodi.
🧱 HTML — Meet Your Website's Body
Meet Bobo — he's going to help us understand websites forever! 🧑
Bobo has a head and a body (arms, legs, feet). That's exactly how every website is built too:
👆 Study the picture, then try the interactive version below!
🧑 HTML IS LIKE YOU! 🖥️
👆 Tap any part of the kid — watch the browser light up and see its secret ASCII code!
🧠
😊
<head>
🧭
<nav>
🖼️
📝
▶️
🔗
<div>
✍️
<input>
<footer>
👀 kidssite.com 👀
⭐ KIDS SITEHOMEABOUTGAMES
🪁
Welcome! ❤️
🐱
👤 Your name?SEND
👆 Tap a body part to begin!
Every part of you matches a part of a web page — and every tag is really just letters with secret ASCII numbers underneath.
🧠 The <head> tag is like Bobo's head — it holds the "thinking" stuff nobody sees directly: the website's title (like a name tag), and other behind-the-scenes info. You don't see a brain when you look at someone, but it's controlling everything!
🧍 The <body> tag is like Bobo's actual body — arms, legs, feet — everything people can actually SEE and interact with. All your headings, pictures, and buttons live here.
And who's looking AT Bobo? That's the browser — like a boy standing in front of Bobo, watching him, dressed and moving!
📓 A Notebook, Not a Novel
A novel is just paragraphs of flowing words — no labels, no sections. But HTML is written like a notebook with labeled tabs: "Chapter 1," "Chapter 2," each clearly marked. That's what <tags> do — they LABEL each part so the browser knows exactly what it's looking at: "this is a heading," "this is Bobo's head," "this is his body."
👉 Scroll down to Dress Up Bobo below — you'll see exactly how his "clothes" (CSS) and "movements" (JavaScript) get added on top of his body (HTML)!
🔤 Why the Pointy Brackets ( < > )?
Every tag looks like <div> ... </div> — the angle brackets act like open and closed hands, clearly wrapping around whatever's inside so the browser instantly knows "this is a labeled instruction, not just plain words." The slash ( / ) in the closing tag means "this label is now finished" — like closing a folder you opened earlier.
📖 Meet the Man Who Invented HTML — Using the Secret Code You Already Know
In 1989, at CERN — the very same place Håkon later invented CSS — a scientist named Tim Berners-Lee wanted computers everywhere to share documents that could link to each other. But he had a problem: how do you write a "label" inside plain text, without confusing it with the actual words?
His answer was brilliant: he remembered that every computer already agreed on ASCII — the secret number for every character, including < and >. He decided: "Whenever a browser's eyes see the ASCII code for <, it should stop reading normal words and start reading a special LABEL instead — until it sees >, when normal words continue again."
That single rule is HTML. Tim didn't invent new secret numbers — he reused the ASCII table everyone already had, and just taught browsers a new RULE for what to do when they spot certain characters. That's it. That's the whole invention.
🧱 Common HTML Tags — One at a Time
Real mastery comes from seeing the same idea again and again, in small doses. Here are the tags you'll use the most — each one explained, shown, and ready for you to try.
<h1>My Big Title</h1>
<h1> makes the biggest, boldest heading on a page — like the title of a book.
My Big Title
<p>Just a regular sentence.</p>
<p> stands for "paragraph" — it's for normal, everyday sentences.
Just a regular sentence.
<div>A labeled box</div>
<div> is an invisible box that groups things together — remember, Bobo's entire body is built from divs!
A labeled box
<button>Click Me</button>
<button> makes a real, clickable button — though it needs JavaScript (next lesson!) to actually DO something when clicked.
<img src="cat.jpg">
<img> shows a picture. Notice it has NO closing tag — it's a "self-closing" tag because a picture doesn't wrap around other content.
🖼️
<a href="lessons.html">Go to Lessons</a>
<a> stands for "anchor" — it's a clickable link that takes you to another page, like the ones in our own navigation bar!
👉 Now scroll down to Dress Up Bobo and your own Playground below — try adding one of these tags yourself and watch what happens!
📓 Notebook vs Novel — See the Browser's Face!
Tap the coloured tabs on the notebook and watch how fast the browser finds each part — then look at the poor confused novel beside it!
📓 A Notebook, Not a Novel!
Why does HTML use all those <tags>? Tap the coloured tabs on the notebook and watch the browser's face — then look at the poor confused novel! 👀
📖 The Novel — no labels!
Just flowing words... which part is the title? Where's the picture? Nobody knows!
welcometo mypagei lovecatsmy cat iscalledwhiskershere is apictureof whiskers playingalso pleaseclick thisbuttonto say hellothis website was made in 2026thank youfor visitinggoodbyethe end
is thisa headingis it aparagraphis that apictureor abuttonwho can even tellthe words just goon and onand onwith no signs no labels no sectionsnothing!
😵The Browser: "Help! Which part is the heading?? Where do I hang the picture?? There are NO LABELS!"
📓 The Notebook — HTML with labeled tabs!
👇 Tap a tab — the browser finds that part instantly:
<head>🧠Chapter 0: the thinking part — the page's title & secrets (hidden!)
<h1>📣Chapter 1: Welcome to my page!
<p>✍️Chapter 2: I love my cat Whiskers. He is very funny.
🙂The Browser: "Tap a tab above — I'll show you how fast I find things when they're labeled!"
💡 That's the whole secret: a novel is words with no signs, but HTML is a notebook with labeled tabs. Every <tag> is a label that tells the browser: "this is a heading", "this is Bobo's head", "this is his body" — so it never, ever gets confused! 📓✨
📦 How Real Websites Break Their Body Into Rooms
Remember, <div> is just an invisible box. Real websites use LOTS of divs, each one NAMED for the job it's doing — like rooms in a house, each with a label on the door.
<div class="nav">...</div>
A div named nav holds the website's navigation menu — the links at the top, like our own nav bar!
🧭 Navigation
<div class="logo">...</div>
A div named logo holds the little picture or name that represents the website — like Bobo himself could be a logo!
🤖
<div class="article">...</div>
A div named article holds one whole piece of writing — like one blog post or one story.
📰 Article
<div class="image">...</div>
A div named image holds a picture, keeping it neatly separated from the text around it.
🖼️ Image
<div class="audio">...</div>
A div named audio holds a sound or music player — remember Kodi's own voice buttons? Something like this holds them!
🔊 Audio
Navigation menus and logo lists often use a special tag too — a list! There are two kinds:
<ul><li>Home</li><li>About</li></ul>
<ul> (unordered list) is for items where the ORDER doesn't matter — like nav menu links.
Home
About
Contact
<ol><li>Step 1</li><li>Step 2</li></ol>
<ol> (ordered list) is for items where the ORDER matters — like steps in a recipe.
Wake up
Brush teeth
Go to school
💡 A real webpage is really just LOTS of small, named divs and lists, stacked together like labeled boxes in a room — nothing more mysterious than that!
🧩 Tag Puzzle — Drag & Build Your Own Page!
Pick up a tag block from the library and drop it into the editor. Watch it appear as real code AND as a real page — at the same time!
📚 Your Tag Library — drag one down!
📢<h1>
📝<p>
🖼️<img>
🎬<video>
🔗<a>
📋<ul>
🔘<button>
📝 Your Code (the notebook)
Drag a tag block here (or tap one) to start building...
👀 What The Browser Shows
Your page will appear here!
🐷 Where Does Your Website Actually LIVE?
📖 The Story of the Piggy Bank
Imagine you have a piggy bank 🐷. Every coin you drop inside is safe, and you always know where to find it. Now imagine you have several piggy banks: one for school money, one for sweets, one for gifts — each holding different things, each clearly labeled.
Your computer works exactly the same way! Each thing you make — a picture, a video, a page you wrote — is called a file, like a single coin. And a folder is the piggy bank that holds them, keeping everything organized so nothing gets lost.
But here's the thing: a piggy bank at home can only be reached by people IN your house. So how does the whole world visit your website? You send a copy of your piggy bank up into the cloud ☁️ — a huge, very safe building full of computers (called servers) that never sleep. Once your files live there, anyone, anywhere on Earth, can visit your page — day or night.
That's exactly what happened with Kodi's Code Clubhouse! These very files you're reading right now live in a folder on a server, and travelled through cables (remember the 0s and 1s racing through?) all the way to your screen. 🌍
🪙
A File
One single thing — a picture, a video, or one page you wrote.
🐷
A Folder
The piggy bank that holds lots of files together, neatly organized.
☁️
The Cloud
A giant building full of computers that never sleep, so the whole world can visit.
💡 So a website is really just: files (your work) → inside folders (your piggy banks) → uploaded to the cloud (so everyone can see it).
🛠️ Your Playground
HTML
CSS
JavaScript
👀 Your Website
🎨 Dress Up & Move Bobo!
Bobo's body (HTML) never changes — but his clothes (CSS) and his movement (JavaScript) do, every time you click something below!
🔒
Unlock HTML, CSS & JavaScript to play with Bobo!
👕 Shirt Color (his CSS)
👖 Pants Color (his CSS)
🎬 Movement (his JavaScript)
💻 Here's the real code behind what you just did:
Click a color or movement above to see the code!
🎉 You've met Bobo's body — now let's give him some style!
CSS is exactly like choosing Bobo's clothes. Ready to dress him up properly?
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.
