WorkProcessBlogTeamStart a project

crafyne studio

← Work

2025

Klinik Koding

Interactive coding playground, 2025

120+ interactive modules across HTML, CSS & JS — free and open source

Klinik Koding
nextjseducationinteractive-learninglive-editoropen-sourcehtmlcssjavascript

The Challenge

Most beginner coding resources in Indonesia are either too theoretical, too fragmented across YouTube tutorials, or paywalled behind expensive bootcamps. New learners struggle to bridge the gap between reading syntax and actually writing it — they get stuck in tutorial hell, copying code without truly understanding how each piece behaves. There was no calm, focused, and genuinely fun place to learn the fundamentals at one's own pace, with instant visual feedback.

The Solution

We built Klinik Koding as a hands-on learning platform where every concept is paired with a Live Editor — learners write code and see results instantly, no setup required. The curriculum is structured into seven progressive tracks (HTML Dasar → CSS God Tier → JS Suhu), spanning 120 bite-sized modules that move from first tags to modern features like Container Queries, :has(), Async/Await, and OOP. A friendly mascot offers contextual tips along the way, keeping the tone light without sacrificing depth. The entire platform is bilingual (ID/EN), free, and open source — built to lower the barrier to entry for Indonesian developers learning the web from scratch.

Next project

Meridian

Platform rebuild

Read

Like what you see?
Let's build yours.

Start a project