🤖

Kodi's Code Clubhouse

Learn HTML, CSS & JavaScript — and build your first website!

A Koinder Global Limited production

🔒

This lesson is part of Kodi Premium

Unlock unlimited access to HTML, CSS, JavaScript, the Website Project, Python, and unlimited questions to Kodi.

🏗️ Website Project — Build Your Whole Page

Now you get to use everything together — HTML, CSS, and JavaScript — to build a real mini-website about YOU!

Change the name, add your favorite color, and try adding your own button. This is exactly how real websites are built — one small piece at a time.

🛠️ Your Playground

HTML
CSS
JavaScript
👀 Your Website

🎉 You just built a whole website using everything you've learned!

Ready to peek at a completely different coding language?

🐍 Next: Intro to Python →
🏅

An Official Koinder Skills Academy Programme

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

`; previewFrame.srcdoc = doc; } [htmlBox, cssBox, jsBox].forEach(box => box.addEventListener('input', renderPreview)); htmlBox.value = `

All About Me

\n

My name is Kodi and I love building websites!

\n\n

`; cssBox.value = `body { font-family: sans-serif; text-align:center; background:#FDF6FF; }\nh1 { color: #7C3AED; }\nbutton { padding: 10px 18px; border-radius: 10px; border:none; background:#A855F7; color:white; }`; jsBox.value = `document.getElementById('favBtn').addEventListener('click', function(){\n document.getElementById('colorOut').textContent = "💜 Purple is amazing!";\n});`; renderPreview(); markLessonSeen('project'); document.getElementById('projectIntroSpeakBtn').addEventListener('click', ()=>{ speakText("Now you get to use everything together, HTML, CSS, and JavaScript, to build a real mini website about you! Change the name, add your favorite color, and try adding your own button. This is exactly how real websites are built, one small piece at a time."); });