CSS Wrapped 2024
Chrome DevRel highlights 17 new fantastic features launched for Chrome and the web platform in 2024.
Issue #601
Solved By Modern CSS: Feature Image
Ahmad Shadeed shows how to use container queries and CSS :has() to build a feature image.
From Our Sponsor
Deliver Pixel-Perfect UIs with BrowserStack's Visual Testing Suite
Tired of visual bugs ruining your deployments? BrowserStack’s Visual Testing Suite—featuring Percy, App Percy, and Visual Scanner—ensures flawless UIs by catching even the smallest inconsistencies across 20,000+ real devices.
Write and ship your CSS with confidence, knowing that any changes you make won’t have unintended consequences on a seemingly independent part of your UI.
CSS Weekly on YouTube
▶ A Practical, Hands-On Guide to Improving Your UI (JavaScriptmas Challenge)
A step-by-step guide on fixing bad user interfaces based on fundamental UI Design principles, along with tips that will help you take your UI skills to the next level—based on a JavaScriptmas coding challenge “Ugly Advent Calendar”.
▶ Frontend News #10: Gradient Borders, Perfect Centering, Animating Details/Summary
Find out how to use View Transitions API to create cross-document page transitions, how to easily show Baseline status on your blog posts, how Container Queries work, and more.
Sponsored Link
Level Up Your Coding Skills With Scrimba
Level up your coding skills and build awesome projects in a variety of languages and frameworks, including HTML, CSS, JavaScript, React, TypeScript, and more.
For a limited time, you can get an exclusive discount if you upgrade to Scrimba Pro to get access to all of their courses.
Inspiration
Speed Indicator (CSS)
Konstantin Denerz created a beautiful demo using only CSS.