Collection
Dashboards
Browser-native dashboard interfaces featuring data visualization components, chart patterns, stat displays, and admin panel layouts built with HTML, CSS, and JavaScript.
Css
Note
The Case for Small Reusable Pattern Libraries
Why building a personal library of small, tested front-end patterns is more valuable than collecting bookmarks. How to structure, maintain, and grow a pattern collection that actually gets used.
Note
When CSS Is Enough and When It Isn't
Practical guidelines for deciding when pure CSS solutions are the right choice for visual work, and when reaching for JavaScript or SVG is the smarter move.
Note
Why Some Concepts Break in the Browser
A look at why visually clean design concepts often fail when translated to browser code, and the rendering realities that cause the gap between mockup and implementation.
Guide
CSS Architecture for Small Visual Projects
How to organize CSS for small to medium visual projects, component libraries, and gallery sites. Covers naming conventions, file structure, custom properties, specificity management, and scalable patterns.
Guide
Accessibility for Decorative Motion
How to implement accessible animation in visual interfaces. Covers prefers-reduced-motion, focus management, ARIA patterns for animated content, and practical strategies for balancing visual craft with inclusive design.
Collection
Micro-Interactions
Small, purposeful browser-native animations that improve user experience. Hover states, toggle transitions, feedback animations, and subtle motion patterns.
Guide
From CodePen to Production Thinking
How to bridge the gap between experimental front-end work in CodePen and building production-ready code. Covers dependency management, responsive scaling, accessibility, and performance hardening.
Collection
Illustrations
Browser-native illustrations built with CSS and SVG. Scenes, characters, objects, and decorative elements created entirely in code.
Collection
Navigation
Browser-native navigation patterns exploring menus, sidebars, tab systems, breadcrumbs, and mobile navigation built with HTML, CSS, and JavaScript.
Collection
Loaders
Browser-native loading indicators built with CSS and SVG. Spinners, progress bars, skeleton screens, and creative wait-state patterns.
Collection
Clocks
A curated collection of browser-native clock interfaces built with CSS, SVG, and JavaScript. Analog faces, digital readouts, and creative time displays translated into working code.
Guide
Animation Performance in Real UI
How to build smooth, efficient animations for production interfaces. Covers compositor layers, frame budgets, transform-based motion, paint reduction, and real-world performance testing.
Guide
Recreating Visual Shots in HTML and CSS
A practical guide to translating visual references, design screenshots, and UI concepts into clean browser-native implementations using HTML, CSS, and minimal JavaScript.
Featured Study
Animated Clock: Pure CSS
A detailed study of Jan Jatam's pure CSS animated clock. Breaking down how transform-origin, CSS rotation, and timing functions combine to create a working analog clock without JavaScript.