https://5t3ph.dev

Stephanie Eckles | Front-End SWE, Author, SpeakerStephanie Eckles (@5t3ph) - author of ModernCSS.dev, SmolCSS.dev, 11ty.Rocks, creator of StyleStage.dev, front-end focused SWE, speaker.Stephanie Eckles | Front-End SWE, Author, Speaker Skip to main content Learn Projects Articles Events Stephanie Eckles @5t3ph • she/her Front-End Focused Software Engineer ‹ a11y • HTML • CSS • 11ty • Design Systems • JS › Hello! 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, Twitch streamer, podcast guest, 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! Available for speaking, writing, teaching, and consulting - get in touch. 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. Begin Learning Modern CSS About ModernCSS.dev 138 stars on Github Modern CSS Challenges Guided practice for leveling up with modern CSS. Learn by doing through building components and layouts. Sign-up for launch notifications Style Stage A 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 2112 stars on Github 12 Days of Web A series promoting fundamental web technologies: HTML, CSS, and JavaScript. Learn about 12 native web features that can lessen your framework reliance. Read the Series Streaming Front-End Topics on Twitch Join me on Twitch to explore topics across the front-end including CSS, HTML, and accessibility, as well as Eleventy. Follow on Twitch egghead Front-End Videos 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! View All Video Lessons 20 Min Landing Page Build an Eleventy Site from Scratch 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. Start the Eleventy Video Course Learn From Steph A free video series with enhanced transcripts to help beginners learn the essentials of HTML and CSS. Start Your Webdev Journey About LearnFromSteph.dev Accessible Cross-Browser CSS Form Styling In just under 2 hrs and 18 lessons, you'll work through the semantics and Sass styles of a mini form design system featuring the most common controls while learning how to keep them accessible. Requires an egghead membership. Start the Video Course Developer Resources 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! Visit SmolCSS.dev 780 stars on Github CSS Tips & Front-End Resources Join the ModernCSS.dev newsletter for updates, tips, and resources! Subscribe SupportsCSS 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. Visit SupportsCSS.dev 269 stars on Github ButtonBuddy A web app to learn about accessible button contrast and generate your own accessible button color palette. Visit ButtonBuddy.dev 65 stars on Github a11y Color Tokens Generate accessible complementary text or UI colors as Sass variables and/or CSS custom properties from your base color tokens. Get a11y-color-tokens 158 stars on Github 11ty Rocks! A collection of tutorials, tips, videos, starters, projects, plugins, and resources for the static site generator Eleventy (11ty). Visit 11ty.Rocks HTML Recipes A collection of quick copy HTML snippets for a variety of common scenarios such as navigation, heroes, and lists. Contributions welcome! Visit HTMLRecipes.dev 128 stars on Github css-browser-support Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentages. Use css-browser-support 67 stars on Github 11ty Netlify Jumpstart Quickly 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 236 stars on Github 11ty Sass Skeleton Starter Featuring absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty. Get the Starter 241 stars on Github Object-Fit Focal Point Provide an absolute URL to an image and generate the object-position value to capture an image's focal point given a custom aspect-ratio. Generate Focal Point 20 stars on Github Articles You can find me as a writer on Smashing Magazine, CSS-Tricks, ModernCSS, 11ty Rocks, and DEV. View all articles Latest post on ThinkDoBeCreate: A Call for Consensus on HTML Semantics HTML is supposed to be easy to learn. And sure, the basics are pretty clear, but how are we supposed to make the "right" choice in nuanced situations? Unleashing the Power of CSS 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. Level Up Your CSS Skills With The :has() Selector 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. Getting Started With CSS Cascade Layers 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. A Primer On CSS Container Queries 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. Contextual Spacing For Intrinsic Web Design 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. Speaking and Events Available for speaking, teaching, workshops, and being a podcast or stream guest - get in touch. Upcoming Learn CSS Grid First Winging It LIVE July 23, 2024 at 12 PM Central Join Live Stream Workshop: Building Interactive, Accessible Components with Modern CSS & JS Web Unleashed October 9, 2024 Workshop Registration Modern CSS Feature Collisions and Pitfalls Web Unleashed October 10-11, 2024 Register Now TBD TBA March 6-7, 2025 Past Modern CSS For Dynamic Component-Based Architecture Front-end Design Conference April 25-26, 2024 Weird Things You Missed About CSS Front Conference, Zurich Aug 31 - Sept 1, 2023 Talk Slides Modern CSS For Dynamic Component-Based Architecture CSS Day, Amsterdam June 8 & 9, 2023 Article & Demos Watch Recording Building a Membership Site with 11ty TheJam.dev 2023 January 25-26 2023 Watch on YouTube Level-Up With Modern CSS Smashing Conference Workshop July 11-25, 2021 Practical Uses For Container Queries Web Directions: Hover April 29 & May 6, 2022 User Zoom and Reflow Accessibility Club May 4, 2022 Scaling CSS Layout Beyond Pixels beyond tellerrand May 2-3, 2022 Watch the talk bt Slides Modern CSS Upgrades to Improve Accessibility axe-con 2022 March 16, 2022 Talk recording The Modern CSS Toolkit Stay Curious (BT) January 18, 2022 Creating 11ty Collections 11ties Meetup November 11, 2021 11ties Recording Article version CSS Grid, Container Queries, and Aspect-Ratio Learn With Jason September 23, 2021 Watch the Episode View the Demo Container Queries Demo Component Carousel June 23, 2021 Catch the Replay Actions Speak Louder Smashing Meets April 27, 2021 Watch the Replay Minimal CSS Solutions to (Previously) Complex Problems CSS Café March 25, 2021 Meetup Recording Eleventy: The Perfect Idea Playground Ladies of Jamstack / Jamstack Toronto March 8, 2021 Going Beyond Static Sites With Eleventy TheJam.dev 2021 January 28-29, 2021 Slides and Article Style Stage and Modern CSS LondonCSS Meetup September 10, 2020 Watch on YouTube Slides and Resources CSS Masters Talk Interview August 2020 Watch Interview on YouTube Podcast Appearances Check out all episodes of the podcast I co-host - Word Wrap PodRocket: Weird CSS with Stephanie Eckles Hosted by: Paul Mikulskis September 20, 2023 PodRocket: Your UI/UX questions answered Hosted by: Emily Kochanek Ketner March 31, 2023 DevJourney Hosted by: Tim Bourguignon September 12, 2022 Smashing Podcast Hosted by: Vitaly Friedman June 28, 2022 PodRocket: Scaling CSS with Stephanie Eckles Hosted by: Noel Minchow June 21, 2022 FSJam Hosted by: Anthony Campolo and Christopher Burns January 24, 2022 Café con Tech Hosted by: Matias Hernández September 6, 2021 Modern Web Podcast Hosted by: Lindsay Wardell from This Dot June 4, 2021 Codepen Radio on TV Hosted by: Chris Coyier May 26, 2021 DrunkenUX Hosted by: Aaron Hill and Michael Fienen May 24, 2021 Frontend Heroes Hosted by: Scott Francis and Evan Payne May 18, 2021 Front End Nerdery Hosted by: Todd Libby March 3, 2021 Accessible Cross-Browser CSS Form Styling Hosted by: Taylor Bell at egghead February 22, 2021 © 2024 Stephanie Eckles Support my projects - buy me a coffeeenen1727566866https://5t3ph.dev

Modifier votre site ?

Que fais-tu?