Front-End Foundations & Future Features
My Collection of web development resources for the modern developer and designer
A curated collection of web development resources covering modern CSS, accessibility best practices, and innovative component designs from industry experts. Features articles on keyboard navigation, optical alignment, customizable elements, and cutting-edge web techniques.
-
Inclusive Components: Cards
Some of the components I’ve explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification. It’s at your discretion how closely you follow these requirements. Research may show
-
What Does It Really Mean For A Site To Be Keyboard Navigable — Smashing Magazine
Keyboard navigation is a vital aspect of accessible web design, and a detail-oriented approach is crucial. Prioritizing keyboard navigation prioritizes the user experience for a diverse audience, extending your reach while simultaneously fostering a more inclusive web environment.
-
Learning how CSS-only carousels are going to work
Carousels are coming to CSS!🔗 Links✅ my code from this video: https://codepen.io/kevinpowell/pen/qEBJBxe✅ Carousels with CSS: https://developer.chrome.com/b…
-
Perfect Your Designs With Imperfection: Guide to Optical Alignment
Design is not about symmetry and mathematics, it’s about balance. Use your eyes not rectangular containers.
-
Standard EBooks
Free and liberated ebooks,carefully produced for the true book lover.
-
Color contrast with Web Components
Want to show the contrast levels of two colours? Try out this Web Component I've made!
-
Squish Meets Structure
Designing with Language Models
-
Item Flow
Notes on the proposed Item Flow system for grid, flexbox, and masonry
-
Formulas for optical adjustments
A long-standing trope of the design world is that computers are bad at aligning and balancing the relative scales of elements. This is incorrect.
-
Styling Tables the Modern CSS Way
Modern CSS makes styling HTML tables in a considered, responsive nature a breeze. Michelle Barker breaks it all down for you in this deep dive.
-
SmolCSS
Minimal snippets for modern CSS layouts and components
-
Using scroll snap events - CSS: Cascading Style Sheets | MDN
The CSS scroll snap module defines two scroll snap events: scrollsnapchanging and scrollsnapchange. These enable running JavaScript in response to the browser determining that new scroll snap targets are pending and selected, respectively.
-
Metascraper: unified metadata from the web
Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more.
-
NeuralSVG: An Implicit Representation for Text-to-Vector Generation
NeuralSVG generates vector graphics from text prompts with ordered and editable shapes. Our method supports dynamic conditioning, such as background color, which facilitating the generation of multiple color palettes for a single learned representation.
-
The customizable select - Part one: history, trickery, and styling the select with CSS
Exploring customizable select elements. This series explores styling possibilities. The first article covers the history and provides a guide to building a custom select as a progressive enhancement. Styling selects with CSS for unique and fun experiences.
-
The customizable select - Part two: Potions, anchoring, and radial shenanigans in CSS
The second part customizable select with CSS series. Highlighting anchor positioning to create a radial potion select element with just HTML and CSS
-
Single HTML Element Star Rating Component
Learn how to create a customizable star-rating component using just HTML and CSS, with a minimal amount of inline JavaScript. This article covers practical tips, code examples, and trade-offs for building flexible, visually appealing rating systems. :: Blog post at Alvaro Montoro's Personal Website.
-
Updates to the customizable select API
Everything that has changed since the RFC post for this feature.
-
una.im | New capabilities for attr()
Advanced attr() is landing in Chrome 133, and I'm really excited for this feature! Here's a bit about it and how you can use it.
-
Building the Perfect Logo Strip - 9elements
We've all been there: you're working on a website and need to display a row of logos—clients, partners, sponsors—you name it. However, logos come in all shapes and sizes, and making them look good together can be quite challenging. How do you get them to play nice and look visually appealing without spending hours tweaking each one? This challenge becomes even trickier when you don't know in advance which logos will be in your logo row.
-
Modeling organic branching structures with the space colonization algorithm and JavaScript
Learn how you can procedurally generate realistic branches, vines, veins, roots, and other branching structures from nature using codel
-
Aligning rounded objects. A practical guide
The article by Martin Adamko explores the use of mathematics to determine the optimal amount of negative space required when creating rounded shapes, such as circles and rectangles, to ensure visual balance. By calculating the extra width needed based on the radius and height, the author provides guidelines that allow for efficient and aesthetically pleasing designs. The key takeaway is that mathematical calculations help maintain design balance while minimizing unnecessary negative space.
-
The Difference Between HTML Attributes and Properties
Attributes and properties allow you to control how HTML elements function and read data about their state. Although the terms are often used interchangeably, subtle differences between the two can lead to unexpected behavior and bugs.
-
How to Favicon in 2025: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog
Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.
-
CSS scroll-state() | Blog | Chrome for Developers
Like container queries; but for stuck, snapped, and overflowing queries.
-
CSS nesting improves with CSSNestedDeclarations
CSS nesting is getting a whole lot better!
-
Accessible SVGs: Perfect Patterns For Screen Reader Users — Smashing Magazine
Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers. Carie will also be running an online workshop on Accessible Front-End Patterns all around front-end accessibility.
-
The Case for Web Components
This free downloadable ebook contains explanations, experience, resources, articles, and expert recommendations that’ll equip you with the skills to create versatile web components.
-
Awesome Standalones
A curated list of awesome framework-agnostic standalone web components - davatron5000/awesome-standalones
-
Space colonization (2D) experiments in JavaScript
Series of visual experiments in JavaScript exploring the topic of space colonization as a method for generating interesting 2D forms.
-
Coding Challenge #17: Fractal Trees - Space Colonization
In this coding challenge, I'm using the space colonization algorithm to make a tree generator. This is the 4th part of my algorithmic botany series. Code: ht...
-
Web Components: Little Bits
Davids talk about using Web Components to sprinkle a little fun onto my website, and how well they work in Design Systems.