As a father and engineer, I wanted to create something meaningful for Muslim kids — a place where they could learn about the prophets, the Quran, and Islamic values through interactive storytelling rather than static text. That idea became Islamic Kids Stories, and Claude Code helped me bring it to life.
The Idea
Most Islamic educational content for kids is either dry PDFs or YouTube videos with no interactivity. I wanted something different: a website where children could swipe through beautifully illustrated story slides, answer quiz questions, earn stars, and hear narration in both English and Arabic. No app store. No downloads. Just open a link and start learning.
What We Built
The site is a fully interactive, bilingual Islamic learning platform. Here's what's inside:
Key Features
Building with Claude Code
This was a bigger project than a typical blog. Each story page is an interactive slide-based experience with animations, quizzes, drag-and-drop activities, audio playback, and bilingual content. Claude Code handled it all as a pair programmer.
The workflow was conversational. I'd describe what I wanted — "make a story about Prophet Nuh with slides, a quiz at the end, and audio narration" — and Claude would generate the complete HTML page with inline styles, the slide system, quiz logic, and audio integration. When I wanted changes — "add a drag-and-drop activity to slide 5" — Claude would read the existing file, understand the structure, and insert the feature in the right place.
What impressed me most was how Claude handled the bilingual complexity. Arabic text needs right-to-left layout, different fonts, and careful handling of mixed-direction content. Claude got this right consistently, switching between Poppins for English and Amiri/Noto Sans Arabic for Arabic text, with proper RTL styling.
The Tech Stack
Like my other projects, I kept the stack deliberately simple:
Pure HTML, CSS, and JavaScript — no React, no build tools, no npm. Each story page is self-contained. The site loads instantly, works offline after first load, and will run for years without maintenance.
ElevenLabs TTS for generating high-quality audio narration. I wrote a Node.js script that reads the story content from a JSON file and generates English and Arabic audio files for each slide. The result sounds natural and warm — exactly what you want for children's content.
LocalStorage for progress tracking. No backend, no database. A child's name, star count, and completed stories persist in their browser. Simple, private, and reliable.
Lessons Learned
Kids' content demands higher quality
When building for children, everything matters more. The language has to be simple but not condescending. The interactions have to be intuitive without instructions. The feedback has to be immediate and encouraging. Claude helped maintain this standard across every page.
Bilingual is hard but worth it
Supporting English and Arabic wasn't just about translating text. It meant RTL layouts, different typography, separate audio tracks, and a seamless toggle between languages. The effort pays off — it opens the site to families worldwide.
Static sites scale to any complexity
This project has interactive slides, audio playback, drag-and-drop, quizzes, progress tracking, and bilingual support — all without a framework or build step. The constraint of staying simple actually led to cleaner, more maintainable code.
Check It Out
The site is live at hisham-abuella.github.io/Interactive-Islamic-kids-website. If you have young kids or know a Muslim family, share it. It's completely free, no ads, no tracking, and built with love.
More stories and Quran surahs are on the way. The vision is to build the most engaging, free Islamic learning platform for children on the web — one story at a time.