Frontend & UI
The frontend and UI category is about the layer users actually touch: CSS architecture, animation and transitions, accessibility, responsive design, and browser performance. An interface feeling good is never an accident — it's the sum of measurable decisions like which property you animate, how many milliseconds a transition runs, and whether someone navigating by keyboard can see the focus ring. The writing here covers both those details and the bigger picture: how to prevent layout shift, where a WebGL or otherwise heavy effect should begin and end on mobile, and how to build accessibility in from the start rather than patching it on afterwards. Most examples come from this site's own interface.
Scroll Animation: Performant Effects with Intersection Observer
The modern way to build scroll animation: smooth, performant effects triggered as elements enter the viewport with Intersection Observer.
CSS position: relative, absolute, sticky and fixed
A practical guide that clarifies every CSS position value (static, relative, absolute, fixed, sticky) with real, working examples.
Web Page Speed: A Practical Guide to Faster Loading
Boost web page speed with lazy loading, minification and caching; improve Core Web Vitals and cut load time to milliseconds, not seconds.
CSS Dark Mode: prefers-color-scheme and Toggle Guide
How to build CSS dark mode with custom properties, prefers-color-scheme and a small toggle. A flicker-free, persistent theme guide.
Three.js Animation: Build a Live 3D Scene
Three.js animation basics: scene, camera, render loop and spinning meshes to build a live 3D scene step by step.
Three.js Intro: Your First 3D Scene in the Browser
A Three.js intro: learn what WebGL is and build your first rotating 3D cube in the browser with scene, camera and renderer.
Web Accessibility: Keyboard, ARIA and Contrast Guide
Web accessibility basics: keyboard navigation, correct ARIA use and WCAG contrast ratios for interfaces everyone can use.
CSS Variables: A Practical Guide to Theming & Reuse
Learn to build themes, manage colors from one place and cut repetition using CSS variables, with real examples.
CSS Media Query Guide: Responsive Design Basics
Learn to build a mobile-first breakpoint strategy with CSS media query, avoid common mistakes and apply modern responsive techniques with examples.
CSS Animation: transition and keyframes guide
CSS animation basics: smooth transitions, @keyframes-driven motion, performance tips and real, copy-paste examples.
CSS Grid: A Practical Guide to Modern Layouts
Learn to build two-dimensional, flexible and maintainable page layouts with CSS Grid using row and column templates, step by step.
Alignment and Layout with CSS Flexbox
Learn the fundamentals of CSS Flexbox: main and cross axis, justify-content, align-items, gap, flex-grow/shrink/basis and real-world layout patterns.