The themes for the introductory exercise

Container queries have landed 🔥

• Michelle Barker: Getting started with CSS container queries (MDN)
• Chris Coyier: Container Units Should Be Pretty Handy (CSS tricks)
• Stephanie Eckles: Container Query Units and Fluid Typography (moderncss.dev)
• Manuel Matuzović: Using the em unit in container queries (100 Days of CSS)

'Normal' media queries

• The spec: prefers-color-scheme and prefers-reduced-motion (MDN)
• Charles Reynolds-Talbot: The Dark (Mode) Web Rises (charlesrt.uk)
• Kilian Valkhof: The complete guide to CSS media queries (Polypane Blog)
• Manuel Matuzović: I totally forgot about print style sheets (matuzo.at)

Writing modes and logical properties

• The spec: writing-mode intro (MDN)
• Jen Simmons: Writing Modes (jensimmons.com)
• Ahmad Shadeed: Digging Into CSS Logical Properties (ishadeed.com)
• Adrian Roselli: CSS Logical Properties (adrianroselli.com)

Style queries are pretty cool as well 🌶️

Chrome and FireFox

• Manuel Matuzović: Intro container style queries (100 Days of CSS)
• Ahmad Shadeed: All About CSS Style Queries (ishadeed.com)

Modern brighter colors 🔥

• Manuel Matuzović: Space-separated color notations (100 Days of CSS)
• Nikita Vasilyev: Brighter Colors with Display-P3 (webkit.org)
• Geoff Graham: Falling in Love with OKLCH - brighter colors (Smashing)
• Adam Argyle: High Definition CSS Color Guide (developer.chrome.com)

Color functions

• Adam Argyle: color-mix() (developer.chrome.com)
• Manuel Matuzović: relative color syntax - Chrome/Safari (100 Days of CSS).
• Chris Coyier: Exploring color-contrast() - Safari TP 🚩 (CSS tricks)).

Miscellaneous color snacks

• accent-color → highlight-color of form controls
• color-scheme → default dark en light mode
• font-palette → multi-color fonts (further explanation)

Filters

• Chris Coyier: CSS filters basics (CSS tricks)
• Una Kravets: Chaining CSS filters (CSS tricks)
• Manuel Matuzović: Backdrop-filter (100 Days of CSS)
• Sara Soueidan: SVG filters 101 (Codrops)
• Lucas Bebber: Gooey blobs with SVG filter (CSS tricks)

Blend-modes

• Chris Coyier: Blend-mode basics (CSS tricks)
• Robin Rendle: Chaining blend-modes (CSS tricks)
• Miriam Suzanne CSS Tie-Dye Gradient Backgrounds with blend-modes (miriamsuzanne.com)

Masks

• Manuel Matuzović: Mask properties intro (100 Days of CSS)
• Michelle Barker: CSS Halftone Patterns (CSS in Real Life)
• Ana Tudor: Mask compositing: the crash course (CSS tricks)

Scroll-based animations 🔥

Chrome and Firefox 🚩

• Adam Argyle: An intro to Scroll-Driven Animations with scroll() and view() (Codrops)
• Bramus van Damme: A bunch of demos and tools to show off Scroll-driven Animations (scroll-driven-animations.style)

Other thingies

• Dan Wilson: Get Moving with CSS Motion Path (danielcwilson.com)
• Bramus van Damme: CSS Animated Grid Layouts (web.dev)
• Bramus van Damme: the linear() easing function (developer.chrome.com)
• Bramus van Damme: Combine animations with animation-composition (developer.chrome.com)
• Jhey Tomkins: Animated Gradient Text (web.dev)
• Temani Afif: We can finally animate CSS gradient (dev.to)
• Una Kravets: Smooth entry and exit animations (a.o. for popovers) (developer.chrome.com)

Popover 🔥

Note: anchor-position works for all elements :)

• Kyle Cook: Popover and anchor-positioning in 15 minutes (YouTube)
• The spec: popover and backdrop (MDN)
• Una Kravets: Introducing the popover API (developer.chrome.com)
• Jhey Tomkins: Stick elements to each other with CSS anchor positioning (developer.chrome.com)
• Una Kravets: Smooth entry and exit animations (a.o. for popovers) (developer.chrome.com)
• Sanne: an anchor example and another anchor example (CodePen)

Grid

• Rachel Andrew: Subgrid intro (web.dev)
• Rachel Andrew: 10 Subgrid examples (12 Days of Web)
• Manuel Matuzović: Masonry layout - Safari TP/FireFox 🚩 (100 Days of CSS)
• Bramus van Damme: CSS Animated Grid Layouts (web.dev)
• Chris Coyier: Named Grid Areas (CSS tricks)

Tasty snacks

• The spec: aspect-ratio en object-fit met object-position (CSS tricks)
• Tania Rascia: Text around CSS Shapes (Codrops)
• Bramus van Damme: Exclusive Accordion/Details (developer.chrome.com)

Math :)

• The spec: min(), max() en clamp() (MDN)
• Stephanie Eckles: Practical uses of calc, clamp, min, max (Modern CSS Solutions)
• Bramus van Damme: Trigonometric functions in CSS (web.dev)
• Michelle Barker: Flower masks with trigonometric functions (CSS in Real Life)

:has() 🔥🔥

• Manuel Matuzović: :has() intro (100 Days of CSS)
• Jen Simmons: :has() longer read (webkit.org)
• Stephanie Eckles: :has() advanced (Smashing)
• Jhey Tompkins: :has() use cases (developer.chrome.com)
• Manuel Matuzović: :has() specificity (100 Days of CSS)

States and interaction

• States: :focus, :focus-within, :checked, :placeholder-shown, :valid, :invalid, :user-valid, :user-invalid, :in-range, :out-of-range, :required, :optional and :empty (MDN)
• Chris Coyier: An example (CSS tricks)
• Joost FaberAnother example (CodePen)

Architectural stuff 🌶️

• The spec: :not() (MDN)
• Manuel Matuzović: :is() and :where() (100 Days of CSS)
• Bramus van Damme: More control over :nth-child() with of syntax (developer.chrome.com)

• Adam Argyle: CSS nesting (developer.chrome.com)
• Kyle Cook CSS Cascade Layers intro (Web Dev Simplified)
• Miriam Suzanne: A Complete Guide to CSS Cascade Layers (CSS tricks)