I'm the author of ModernCSS.dev which provides modern solutions to old CSS problems as in-depth tutorials. I'm also the creator of Style Stage, and author of SmolCSS and 11ty.Rocks. I enjoy sharing my experience as an author, egghead instructor, co-host of the Word Wrap podcast, and conference speaker.
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!
I offer learning resources in a variety of formats including in-depth written tutorials, short videos, courses, and even a CSS playground.
An in-depth tutorial series exploring modern CSS solutions for old CSS problems.
Begin Learning Modern CSS About ModernCSS.dev 60 stars on GithubA modern CSS showcase styled by community contributions. This CSS playground is open to CSS practitioners of all skill levels!
Contribute Your Stylesheet About StyleStage.dev 884 stars on GithubA free video series with enhanced transcripts to help beginners learn the essentials of HTML and CSS.
Start Your Webdev Journey About LearnFromSteph.devLearn 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!
View All Video Lessons 20 Min Landing PageBuild 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.
Start the Eleventy Video CourseJoin me on Twitch to explore topics across the front-end including CSS, HTML, and accessibility, as well as Eleventy.
Follow on TwitchA few things I've made for you to enjoy and help you with your own projects!
Demos of minimal snippets for modern CSS layouts and components that you can use today in your projects.
Visit SmolCSS.dev 351 stars on GithubJoin the ModernCSS.dev newsletter for updates, tips, and resources!
A web app to learn about accessible button contrast and generate your own accessible button color palette.
Visit ButtonBuddy.dev 33 stars on GithubA web app to learn about accessible button contrast and generate your own accessible button color palette.
Get a11y-color-tokens 76 stars on GithubA collection of tutorials, tips, videos, starters, projects, plugins, and resources for the static site generator Eleventy (11ty).
Visit 11ty.Rocks 22 stars on GithubQuickly launch an 11ty-generated static site. Includes a minimal Sass framework, and generated sitemap, RSS feed, and social share preview images.
Generate Repo Preview the Jumpstart 141 stars on GithubFeaturing absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty.
Get the Starter 78 stars on GithubYou can find me as a writer on Smashing Magazine, CSS-Tricks, ModernCSS, 11ty Rocks, and DEV. Here is a selection of tutorials and articles I'm most proud of, and that have also received appreciation from the wider community.
Look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.
A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. Learn how to solve this with modern CSS!
Develop an Eleventy setup that you can use as a starting point for your own community (or personal) site.
Understanding selectors, the cascade, and specificity are critical to developing CSS and modifying existing style rules. This two-part guide about advanced CSS selectors includes practical examples.
Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance for single, multiple, and disabled select elements across the top browsers.
Eleventy includes features that allow exceeding the traditional limits of static. Learn how to leverage these features and think beyond static when using Eleventy.
This reflection post reviews the tech stack used, reveals a few tricks, and provides some techniques for how to rapidly go from idea to launch for small projects.
