> Canonical URL: https://codingcat.dev/topic/css

# CSS Courses, Podcasts & Blog Posts | CodingCat.dev

⌨️ Language & Standard Hub

# CSS.

Flexbox, CSS Grid, Subgrid, View Transitions & Scroll Animations

Explore CodingCat.dev hands-on courses, video lessons, podcast episodes, and technical deep-dive blog posts covering CSS: Flexbox, CSS Grid, Subgrid, View Transitions & Scroll Animations.

[Search All CSS Content](/search?q=CSS)![CSS official logo](/logos/tags/css-lockup-light.svg)![CSS official logo](/logos/tags/css-lockup-dark.svg)Official CSS Brand Lockup (3 Blog Posts · 5 Episodes)✏️ CSS Production Architecture Diagram✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]How CSS fits into a modern, type-safe full-stack production architecture on CodingCat.dev.AAA Contrast Verified

## CSS Courses.

[All Courses→](/courses)[![HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents](https://cdn.sanity.io/images/hfh83o0w/production/40ad87fae480aff0c65b6d22225ccf69217ce6e5-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/hyperframes-html-to-video-agents)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)

### [HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents](/course/hyperframes-html-to-video-agents)

Learn how HeyGen's open-source HyperFrames compiler turns self-contained HTML, CSS, and Canvas compositions into deterministic 1080p60 videos built by AI agents.

[![The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](https://cdn.sanity.io/images/hfh83o0w/production/4f86d9868b815e41566e22ae9106f46759e0fc77-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-advanced-html-css-and-a11y)November 4, 2026[![](/logos/tags/astro-symbol-light.svg)![](/logos/tags/astro-symbol-dark.svg)Astro](/topic/astro)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)

### [The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](/course/odin-advanced-html-css-and-a11y)

Build 60fps GPU-accelerated animations, multi-page Astro View Transitions, WCAG AAA focus rings, and accessible native <dialog> and Popover components.

[![The Odin Project 3: Intermediate HTML, Modern Forms & CSS Grid Architecture](https://cdn.sanity.io/images/hfh83o0w/production/7c9064f71f2104b855c2c5cbdc387a70c416c135-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-intermediate-html-and-css-grid)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)

### [The Odin Project 3: Intermediate HTML, Modern Forms & CSS Grid Architecture](/course/odin-intermediate-html-and-css-grid)

Master 2D CSS Grid layouts, Subgrid, CSS Custom Properties, fluid clamp() typography, container queries, and zero-JS form validation with :user-valid.

[![The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](https://cdn.sanity.io/images/hfh83o0w/production/1a16c3a9f7f59d535bef1ab5ee4058e573b80043-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-web-development-foundations)November 4, 2026[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)

### [The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations)

Master the complete Odin Project Foundations path modernized for 2026: how the web works, semantic HTML5, CSS Box Model & Flexbox, and JavaScript DOM fundamentals.

[![CSS Animations](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/07703a0d8102dd092c5f4a691bc08579a7514921-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/course/css-animations)July 22, 2022[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)

### [CSS Animations](/course/css-animations)

How to use CSS Animations by example

## CSS Blog Posts.

Showing 3 of 3 blog postsFiltered: CSS[Open Full Topic Hub &rarr;](/topic/css)[![Install Tailwindcss in Svelte with 1 command](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/899f30ff4efc79aa36a3a66c87734a18765de8e3-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/post/install-tailwindcss-in-svelte-with-1-command)November 28, 2022[![](/logos/tags/svelte-symbol-light.svg)![](/logos/tags/svelte-symbol-dark.svg)Svelte](/topic/svelte)[![](/logos/tags/tailwindcss-symbol-light.svg)![](/logos/tags/tailwindcss-symbol-dark.svg)Tailwind CSS](/topic/tailwindcss)

### [Install Tailwindcss in Svelte with 1 command](/post/install-tailwindcss-in-svelte-with-1-command)

Stop using the 5 step method and remember the npx command to install tailwind.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Let](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/df234899a342359c323e924fd218f8c83b377f79-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/post/lets-learn-svelte)June 1, 2022[![](/logos/tags/svelte-symbol-light.svg)![](/logos/tags/svelte-symbol-dark.svg)Svelte](/topic/svelte)[![](/logos/tags/sveltekit-symbol-light.svg)![](/logos/tags/sveltekit-symbol-dark.svg)SvelteKit](/topic/sveltekit)

### [Let's Learn Svelte](/post/lets-learn-svelte)

Embrace the hype. Give Svelte and SvelteKit a try!  Learn how to build modern web applications with SvelteKit, a quickly growing framework for generating static web pages (SSG) as well as Server Side Rendered content (SSR). In this crash course, you'll learn all the basics including file-based routing, API routes, dynamic routes, global and scoped CSS, and much more!

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Accessibility Best Practices for HTML & CSS](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/92adbc842c19879beb03a6291c6437fe7ea9dac6-1200x631.png?w=1200&q=82&fit=max&auto=format)](/post/accessibility-best-practices-for-html-and-css)August 19, 2021[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)

### [Accessibility Best Practices for HTML & CSS](/post/accessibility-best-practices-for-html-and-css)

Accessibility is an ongoing, ever-evolving process that is an extremely important aspect for inclusion and usability. These are some of the best practices you can follow in HTML and CSS to improve the user's experience on your site.

[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)

No matching blog posts found for this filter.

Try clearing the filter above to browse the full feed.

Loading more blog posts...✓ All blog posts loaded

## CSS Podcast Episodes.

Showing 5 of 5 episodesFiltered: CSS[Open Full Topic Hub &rarr;](/topic/css)[![Simplyfing SvelteKit View Transitions with Paolo Ricciuti](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/34f2211036f7229d80aca4446a3af20e7be99c9a-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/cwcc-1-3-svelte-view-transitions)February 5, 2024[![](/logos/tags/svelte-symbol-light.svg)![](/logos/tags/svelte-symbol-dark.svg)Svelte](/topic/svelte)[![](/logos/tags/sveltekit-symbol-light.svg)![](/logos/tags/sveltekit-symbol-dark.svg)SvelteKit](/topic/sveltekit)

### [Simplyfing SvelteKit View Transitions with Paolo Ricciuti](/podcast/cwcc-1-3-svelte-view-transitions)

sveltekit-view-transitions offers a straightforward approach for implementing these transitions without complexity, aiming to enhance the user interface with smooth and visually appealing changes between views.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Paolo Ricciuti](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/49e74e306a32fae03047de7851452eaf3eb21ffe-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Paolo Ricciuti](/guest/paolo-ricciuti)[![Adam Argyle Presents CSS Features for 2023 and beyond!](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/31db41f81b50703c568a970a26ac96659a869f21-1920x1080.jpg?w=1920&q=82&fit=max&auto=format)](/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond)May 31, 2023[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)

### [Adam Argyle Presents CSS Features for 2023 and beyond!](/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond)

Adam helps reveal some CSS features that will elevate your code and help you push forward.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Adam Argyle](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d099a598f8869fd68695d3ca430da0c6cf6519c9-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Adam Argyle](/guest/adam-argyle)[![Making the Web Easier to Build](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/7746cb172298c612bd72301b08e9132630d03dd1-1920x1080.jpg?w=1920&q=82&fit=max&auto=format)](/podcast/2-18-making-the-web-easier-to-build-with-una-kavets)May 4, 2022[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai)

### [Making the Web Easier to Build](/podcast/2-18-making-the-web-easier-to-build-with-una-kavets)

Una Kravets is a DevRel extraordinaire making CSS magic at Google.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Una Kravets](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/b250e4e6e60441f58a4950056249095033540e2f-512x512.jpg?w=96&h=96&q=82&fit=max&auto=format)Una Kravets](/guest/una-kravets)[![Open Props - an Open Source CSS Props Library](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/ecbf04952f2de4fd0d43cbd39f0905561e5fbe1a-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/2-6-open-props-an-open-source-css-props-library)February 9, 2022[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/oss-symbol-light.svg)![](/logos/tags/oss-symbol-dark.svg)Open Source](/topic/oss)

### [Open Props - an Open Source CSS Props Library](/podcast/2-6-open-props-an-open-source-css-props-library)

We sit down to learn more about Adam Argyle and his new project Open Props.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Adam Argyle](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d099a598f8869fd68695d3ca430da0c6cf6519c9-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Adam Argyle](/guest/adam-argyle)[![Using CSS in JS with Stitches](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/9be71c92a88bc5fb120fa8dcc3ef8f1b6581ecb7-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/1-29-using-css-in-js-with-stitches)July 14, 2021[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)

### [Using CSS in JS with Stitches](/podcast/1-29-using-css-in-js-with-stitches)

We sit down with Pedro Duarte to talk all about using CSS in JavaScript and why Modulz created Stitches.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Pedro Duarte](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/1d521fad31fda359f0ab59015f0c394ce78b18b6-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Pedro Duarte](/guest/pedro-duarte)

No matching episodes found for this filter.

Try clearing the filter above to browse the full feed.

Loading more episodes...✓ All episodes loaded