DEV Community

Cover image for I built an AI-powered coding playground to teach kids how to build websites, one tag at a time
A M S
A M S

Posted on

I built an AI-powered coding playground to teach kids how to build websites, one tag at a time

I built an AI-powered coding playground to teach kids how to build websites — one tag at a time

Hey Dev community 👋

I recently launched a project that’s super close to my heart — a guided, AI-powered playground that teaches kids how to code real websites with HTML, CSS, and JavaScript.

Most AI tools like ChatGPT or v0 give you the final code instantly.

Cool, sure — but how much do you actually learn?

So I flipped the idea on its head:

What if an AI taught you coding by building with you, one step at a time?

That’s exactly what this project does.

✨ What It Does

The app is a kid-friendly web coding sandbox where students:

  • Describe what they want to build (e.g. “a birthday card website”)
  • The AI guides them step-by-step:
    • First: Create an HTML structure (<div>, <h1>, etc.)
    • Then: Add styles in CSS (color, font-size, etc.)
    • Then: Add simple interactivity in JS (e.g. click buttons, alerts)

They don’t get the final code up front — they build it together with AI, like a real mentor.

💡 Why I Built It

I originally made this for my younger sister, who was curious about coding but overwhelmed by full tutorials or coding videos.

So I asked:

“What if I gave her an interface like v0, but instead of doing all the work, it taught her while building something fun?”

Now it’s a real thing — and I’ve opened it up for anyone to use.

⚙️ Tech Stack

  • 🧠 OpenAI GPT‑4 (API for code explanation & step-by-step generation)
  • 🧱 Next.js App Router on Vercel
  • 🎨 Tailwind CSS + shadcn/ui
  • 🔐 Auth (Supabase or Clerk works)
  • 💳 Stripe for free + pro plan billing
  • 📦 PostgreSQL (Neon DB)

Let me know if you'd like a full write-up of how I integrated AI step logic efficiently without burning API costs.

👨‍🏫 Who It's For

  • Kids or teens learning web development
  • Parents or educators looking for safe, creative screen time
  • Beginner coders who want to actually understand what’s happening in their code

It’s especially useful for:

  • Homeschoolers
  • After-school programs
  • Parents who don’t code but want their kids to start

🚀 Try It Out

You can try it for free here (no sign-up needed to test):

👉 https://codiego.vercel.app

If you like it or have feedback — I’d really appreciate it.

And if you have a younger sibling, cousin, student, or kid of your own — let them try building something!

🙏 Feedback Welcome

I'm still early on this journey and trying to turn this into something that helps kids learn for real, not just get instant results.

Would love to hear:

  • Is this something you'd use or share?
  • Any features you'd love to see next?
  • Do you know any communities I should talk to?

Let me know in the comments

Thanks for reading 🙌

Top comments (0)