Learn Hub

Interactive, bilingual (English / ไทย) courses for learning programming languages and web technology — every example runs right in your browser.

27 courses Runnable code EN / ไทย Quizzes & saved progress

Language Deep Dives — master the language itself

Standalone, language-core courses. Deep fluency in the language and its runtime, before any framework.

🐹Go Deep Dive

Intermediate

Syntax, types, methods & interfaces, concurrency, errors & generics, stdlib, testing.

Runs Go in-browser · yaegi→WASM

🟢Node.js Deep Dive

Intermediate

JS essentials, the event loop & async, core APIs, streams, HTTP, modules & npm, testing.

In-browser JS + StackBlitz

🐍Python Deep Dive

Beginner

Syntax, data structures, the data model, functions, typing, async, stdlib & tooling.

Runs Python in-browser · Pyodide

🦀Rust Deep Dive

Advanced

Ownership & borrowing, structs/enums/matching, traits & generics, errors, concurrency.

Runs Rust in-browser · Rust Playground

For TypeScript Developers — backend, comparison-first

Learn a backend language by mapping it to the TypeScript you already know.

🐹Go for TypeScript Developers

Intermediate

Go 101, concurrency, and building an API service with Echo — framed against TypeScript.

Runs Go in-browser · yaegi→WASM

🐍Python for TypeScript Developers

Beginner

Python fundamentals and a FastAPI service — mapped from TypeScript concepts.

Runs Python in-browser · Pyodide

🦀Rust for TypeScript Developers

Advanced

Rust fundamentals and an Axum API service — compared to TypeScript throughout.

Runs Rust in-browser · Rust Playground

For React Developers — transfer what you know

Comparison-first courses that map React concepts to a new framework.

🐦Flutter for React Developers

Intermediate

Widgets, state & lifecycle, navigation, and data — mapped from React.

Open in DartPad

🔥Svelte for React Developers

Beginner

Svelte 5 runes vs hooks, components & templating, stores, SvelteKit.

Live in-browser Svelte compile

🚀Astro for React Developers

Beginner

.astro components, islands & using React in Astro, routing, content collections, and building micro-frontends with Astro.

Open in StackBlitz

For Designers — start from zero

Web technology for UI designers with no programming background.

🎨Web for Designers

Beginner

HTML, CSS, and a little JavaScript — taught from the ground up, with a live editor.

Live HTML/CSS/JS preview

DevOps & Tooling — ship your apps

Tools and workflows for building, packaging, and shipping software.

🐳Docker — From Zero to Hero

Beginner

Images & Dockerfiles, containers, volumes, networking, Compose, optimization, registry & CI/CD.

Code + output · Play with Docker

🟥Redis — From Zero to Hero

Intermediate

Keys & strings, lists/hashes/sets/sorted sets, pub/sub & streams, persistence, caching/rate-limit/locks, Lua.

Gifted Docker script · redis-cli

Product & Experimentation — ship and measure

Release features safely and learn what works with flags and A/B tests.

🧪GrowthBook — From Zero to Hero

Intermediate

Feature flags, the JS/React/Node SDKs, targeting & rollouts, A/B testing, metrics & the stats engine, production.

Gifted Docker compose · copy SDK snippets

Security & Identity — auth done right

Authentication, authorization, and single sign-on for your apps.

🔐Keycloak — From Zero to Hero

Advanced

Realms, clients & roles, users/groups, OIDC & OAuth2 flows, securing apps, tokens & mappers, federation/social, production.

Gifted Docker start-dev · admin console + snippets

Web Platform — modern web capabilities

Native-like web apps: installable, offline-capable, and fast.

📲PWA — From Zero to Hero

Intermediate

Web app manifest, service workers, caching, offline & app shell, push — plus PWA sessions for React, Astro & Svelte.

Runnable in StackBlitz · Mermaid diagrams

🦾WebAssembly — From Zero to Hero

Advanced

The WAT text format, JS interop, linear memory, control flow, compiling Rust/C/AssemblyScript, tooling, and WASI.

Compiles & runs WAT in-browser · StackBlitz

🗄️Browser Storage & Data — From Zero to Hero

Intermediate

localStorage/sessionStorage, cookies, IndexedDB (×2), the Cache API & quota, Web/Shared Workers, and cross-tab data (BroadcastChannel, Web Locks, OPFS).

Runs in-browser (same-origin) · StackBlitz

🧩Web Components — From Zero to Hero

Intermediate

Custom Elements, lifecycle, Shadow DOM, templates & slots, styling (:host/::part/::slotted), attributes/properties/events, composition patterns, and Lit.

Renders live in-browser · Lit via CDN

Databases & Data — store and query at scale

Databases and data systems — the models, queries, and operations behind durable, scalable storage.

🍃MongoDB — From Zero to Hero

Intermediate

The document model, CRUD, querying, indexing (the ESR rule), the aggregation pipeline, data modeling, transactions, and scaling (replica sets, sharding) — with Docker setup and Compass.

mongosh · Node · Python · Go · Rust · Mermaid

🐘PostgreSQL — From Zero to Hero

Intermediate

The relational model, tables & types, SQL CRUD, joins & window functions, indexing (EXPLAIN), transactions & MVCC, JSONB & full-text search, and scaling (replication, partitioning) — with Docker setup and pgAdmin.

psql · Node · Python · Go · Rust · Mermaid

Software Design — patterns & principles, any language

Language-agnostic engineering craft. The reusable solutions and principles behind well-structured code.

🧩Design Patterns — From Zero to Hero

Intermediate

OOP principles (SOLID, composition over inheritance) and all 23 Gang-of-Four patterns — Creational, Structural, Behavioral — each with UML and the same example in 4 languages.

TypeScript · Python · Go · Rust · UML

🧹Refactoring — From Zero to Hero

Intermediate

Improve code without changing what it does — code smells and a catalog of refactorings (Extract Function, Guard Clauses, Replace Conditional with Polymorphism, …), each as a before/after in 4 languages.

TypeScript · Python · Go · Rust · before/after

🧩Microservices Design Patterns — From Zero to Hero

Advanced

The microservices pattern language — decomposition, Database per Service, Saga, CQRS, API Gateway, service discovery, Circuit Breaker, distributed tracing, service mesh — each as Context → Problem → Solution with architecture diagrams.

Mermaid diagrams · TS · Python · Go · Rust

🌐REST API Design — From Zero to Hero

Intermediate

Design RESTful HTTP APIs with TypeScript — resources & URIs, methods & idempotency, status codes & problem+json errors, pagination, versioning & caching, security, and OpenAPI.

Runnable TypeScript · Hono · StackBlitz

GraphQL Design — From Zero to Hero

Intermediate

Design GraphQL APIs with TypeScript — the type system & SDL, schema design, resolvers, mutations & subscriptions, Relay pagination, the N+1 problem & DataLoader, errors, security, and federation.

Runs GraphQL in-browser · GraphQL Yoga · StackBlitz

🔌WebSocket Design — From Zero to Hero

Intermediate

Design real-time systems with TypeScript — the handshake & client API, message design, heartbeats & reconnection, server design, scaling & pub/sub, security, and WS vs SSE vs WebTransport.

Real WebSocket API in-browser · Node ws · StackBlitz