Skip to content
19 exercises

Kata

HTML / CSS · Intermediate
Pure-CSS accordion
No JS. <details> is underused.
Accessibility · Basic
aria-live, when and how
polite vs assertive, when to use neither.
HTML / CSS · Basic
Responsive card grid
Practicing grid-template-rows: masonry without the polyfill.
HTML / CSS · Basic
Color mixer
Three sliders, one calm result.
React · Intermediate
Compound-component tabs
Tabs.List, Tabs.Tab, Tabs.Panel — context inside.
JavaScript · Intermediate
Debounce & throttle, by hand
Two utilities I now reach for monthly.
TypeScript · Intermediate
Discriminated unions, two ways
string literals vs. classes.
JavaScript · Basic
Tiny event emitter
on, off, emit. Nothing else.
React · Basic
Form state with useReducer
Where reducers actually start to feel worth it.
React · Intermediate
Infinite scroll list
IntersectionObserver instead of scroll math.
React · Intermediate
An interview-ready modal
Focus trap, escape, return focus, no library.
Accessibility · Intermediate
Keyboard-first menu
Arrow keys, type-ahead, escape, tab — by the spec.
JavaScript · Intermediate
LRU cache in 40 lines
Map keeps insertion order — let it do the work.
HTML / CSS · Basic
Newsletter signup form
Form validation, the slow way.
JavaScript · Intermediate
Promise pool of N
Limit concurrency without external deps.
HTML / CSS · Intro
QR code component
First Frontend Mentor I ever finished.
TypeScript · Basic
satisfies in practice
Three real cases where it earned its keep.
HTML / CSS · Basic
Stats preview card
Two-column at desktop, stacked at mobile.
JavaScript · Basic
A better typeof
Object.prototype.toString and friends.