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.
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.
