Frontend Engineering: HTML, CSS, JS, and SVG

Core frontend development topics including DOM manipulation, responsive design, and integrating code-based graphics into web applications.

Content tagged frontend

• Post:CSS Cascade Layers (@layer): End Specificity Wars in Large Codebases

  Control CSS priority with layer order, not specificity.

  Learn how CSS cascade layers (@layer) set priority by layer order instead of specificity — unlayered styles, the !important reversal, revert-layer, layering third-party CSS, the full cascade sort order, migrating a large codebase and putting utility classes last.

• Post:Mastering CSS z-index: Stacking Contexts, isolation, and Layering Bugs

  Layer confidently with z-index, stacking contexts, and isolation.

  Learn how CSS z-index really works — painting order, stacking contexts, negative z-index, isolation: isolate, the top layer, a scalable z-index scale, and a step-by-step way to debug layering bugs.

• Post:HTML5 Canvas Guide: Drawing, Animation, and Best Practices

  Draw, animate, and optimise graphics with the Canvas API.

  Learn the HTML5 Canvas API from first shapes to advanced techniques — paths, transforms, animation, input, high-DPI, OffscreenCanvas, pixels, and 3D.

• Post:An Interactive Guide to the CSS linear() Easing Function

  Chain custom stops into springs, bounces, and elastics.

  A deep, interactive guide to CSS's linear() easing function — comma-separated stops, percentage positions, and building spring and bounce curves cubic-bezier() can't express.

• Post:An Interactive Guide to CSS cubic-bezier()

  Drag two control points, design your own curve.

  An interactive guide to CSS cubic-bezier(): what the four numbers control, how to build overshoot and anticipation curves, hand-tuned recipes, and a draggable curve playground.