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.
Lighthouse Frontend Performance Audit: A Practical Guide
How to read a Lighthouse report correctly and fix LCP, CLS and TBT bottlenecks step by step to make your site genuinely faster.
Fluid Typography with CSS clamp(): A Practical Guide
Learn to build font sizes that scale fluidly with the viewport using CSS clamp(), including the formula and accessibility pitfalls.
Sticky Header: Pin and Hide the Bar on Scroll
How to build a sticky header that pins on scroll, hides when scrolling down and reappears when scrolling up — with clean CSS and JavaScript.
Glassmorphism CSS: Frosted Glass with backdrop-filter
Learn to build the glassmorphism CSS effect step by step with backdrop-filter, translucent backgrounds and subtle borders — performant and accessible.
Web Font Optimization: font-display and FOUT/FOIT
A web font optimization guide: control FOUT/FOIT and boost load speed with font-display, preload, WOFF2 and subsetting.
CSS Transform: A Guide to 2D and 3D Effects
Learn how to use CSS transform with translate, rotate and scale to build smooth, GPU-accelerated 2D and 3D effects.
Hamburger Menu: Build an Accessible Mobile Nav
Build an accessible, smooth mobile navigation from scratch with a hamburger menu using plain CSS and JavaScript, step by step.
CSS Specificity: Which Rule Wins?
How CSS specificity is calculated, how the cascade decides, and how !important and inline styles break the order, with clear examples.
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.