Interactive apps for the CSS you can’t learn from a screenshot. Each one is linked from the lesson it teaches where one exists, explains itself as you use it, and works fully in Bengali.
Drag padding, border and margin and watch a 300px box become 360px — then flip to border-box and watch it snap back.
Stack multiple shadow layers, drag directly on the shape, compare box-shadow against filter: drop-shadow().
Linear, radial and conic gradients with unlimited stops — see sRGB vs OKLCH interpolation compared side by side.
Every container and item property, live. Watch order change what you see without touching the HTML.
Style every part of a scrollbar — track, thumb, corner, buttons — with an honest note on which browsers support what.
Paste a selector, see its (a, b, c) weight broken down and colour-coded. Compare two selectors to see which wins.
Build a palette from one colour, check WCAG AA/AAA contrast, preview how it looks under colour blindness.
Drag across cells to place items on a real CSS Grid — mix fr, px, auto and minmax() tracks, export the derived grid-template-areas.
Build a fluid clamp() value for font-size or spacing from a min/max viewport and value pair — live in a real resizable preview frame, no media queries.
Convert between every length, angle, time and resolution unit — with a real, configurable font-size, viewport and container context, plus a live preview and full conversion table.
Multi-layer @keyframes with a real drag-to-position timeline, a visual cubic-bezier editor, a preset library, and scrubbable playback.
Stack and reorder every CSS filter function plus a separate backdrop-filter stack for glass panels — with before/after comparison, your own image, and photo-style presets.
Simulate protanopia, deuteranopia, tritanopia and achromatopsia — with a real severity slider — on your own photo, a live UI mockup, or a pasted palette with pairwise confusability checks.
Generate a configurable-length colour scale for one colour or a whole design system — compare a perceptually-uniform OKLCH sweep against HSL and naive RGB blending, with WCAG badges and multi-format export.
Four text engines — classic pseudo-Latin, pure gibberish, template-built realistic English prose, and Bengali — with word/sentence/paragraph/list output, HTML tag wrapping, and an exact character-count target.
Real photos from Lorem Picsum or solid-colour text boxes from placehold.co — aspect-ratio lock, common-size presets, a real photo browser with credit, and a responsive srcset generator.
Real test videos from lorem.video, placeholdervideo.dev or imgsrc.pub with an automatic fallback chain, plus one verified archived file — aspect presets incl. vertical, a matching poster image, and URL/<video>/React/Markdown output.
Convert between binary, octal, decimal and hexadecimal the way it’s taught in school — repeated division and the place-value table, one step at a time — plus an interactive bit-toggle row and a practice mode for homework.
A plain-text scratchpad that autosaves in your browser — multiple notes, case/line utilities, find & replace, import/export, and an optional syntax-highlighted preview for code snippets.
Real JavaScript, really run — watch the call stack, Web APIs, and microtask queue live as your own code (or a preset) actually executes, with a plain-English narration for every step.
Watch a recursive function’s call stack really grow and shrink, with the real arguments and real return value on every frame — sum, factorial and Fibonacci presets, plus editable code.
See the scope chain build up and tear down as real code runs — real variable values, the real ReferenceError a temporal dead zone throws, and exactly what a closure keeps alive after its outer function has returned.
See how your title tag and meta description would actually look in a Google search result, on desktop and mobile — with real pixel-width measurement, not a character-count guess.
Pick a request type and check or uncheck files to see exactly which template WordPress would actually load, in the real documented search order.
The order common WordPress action hooks fire during a page load, plus a categorized reference of 40+ more — save/update, user/auth, admin, comments, widgets, content filters — each with a ready-to-copy snippet.
Build a secondary WordPress query visually — post type/status, taxonomy and meta queries, date ranges, pagination, performance flags — and get back real, correctly-nested WP_Query PHP with the loop wrapped around it.
Add style and script rows, set handles, dependencies and versioning, and get back a real, correctly-wrapped wp_enqueue_style() / wp_enqueue_script() functions.php block.
