I'm an advocate for accessibility, scalable CSS, and the Jamstack (especially Eleventy). Offline, I'm a mom to two girls and a cowboy corgi, and enjoy baking!
Front-End Learning Resources
I offer learning resources in a variety of formats including in-depth written tutorials, short videos, courses, and even a CSS playground.
Modern CSS Solutions
An in-depth tutorial series exploring modern CSS solutions for old CSS problems.
A series promoting fundamental web technologies: HTML, CSS, and JavaScript. Learn about 12 native web features that can lessen your framework reliance.
Learn more about various front-end development topics such as flexbox, grid, and Sass in 5 minutes or less. If you have 20 minutes available, you can create a whole landing page!
Build a site in 20 mins in this video course! Start from a blank project and build up to an 11ty site that includes Sass, a blog collection, and is prepared to source content from a headless CMS.
Consider becoming a Sponsor to allow me to continue making free resources!
SmolCSS
Demos a growing collection of minimal snippets for modern CSS layouts and components that you can use today in your projects. Includes centering, document styles, grid solutions, and more!
Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies support-based classes, exposes a results object, and allows custom tests.
Supporting both the user preference query for dark mode as well as a toggle previously required duplicated style blocks. With the incoming style queries feature, we can simply down to reading a custom property to define theme styles once.
In this premium SitePoint series, we'll review CSS enhancements to layout, responsive design, element styling, properties, and selectors, and also peek at upcoming features; deep-dive into using the CSS :has() selector for scaling reusable components; discover the practical uses of container queries; and learn how to create responsive CSS layouts without using media queries.
The CSS relational selector :has() allows selecting elements in combinations that were previously impossible without the assistance of JavaScript. Review how to combine :has() with core CSS selectors to extend their capabilities.
Within 2021, a new spec to orchestrate the “C” in CSS was drafted and is now an official candidate recommendation: cascade layers. Learn more about layers and how to use them.
Learn how to coexist with the unpredictability of the browser by using adaptive, contextual spacing techniques. We'll construct a starter set of custom properties for gap, margin, and padding.
