> Canonical URL: https://codingcat.dev/podcast/2-18-making-the-web-easier-to-build-with-una-kavets # Making the Web Easier to Build 🎧 Podcast Episode · S2E18May 4, 2022[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/career-symbol-light.svg)![](/logos/tags/career-symbol-dark.svg)Career](/topic/career)[![](/logos/tags/builder-io-symbol-light.svg)![](/logos/tags/builder-io-symbol-dark.svg)Builder.io](/topic/builder-io)[![](/logos/tags/webdev-symbol-light.svg)![](/logos/tags/webdev-symbol-dark.svg)WebDev](/topic/webdev)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai) # Making the Web Easier to Build ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/7746cb172298c612bd72301b08e9132630d03dd1-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=8wVPvZe5aZc&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[![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)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/6jCPgXnUuLVjjGEHcGVr0C)[Apple](https://podcasts.apple.com/us/podcast/2-18-making-the-web-easier-to-build/id1491655542?i=1000566563210)[YouTube](https://www.youtube.com/watch?v=8wVPvZe5aZc&list=PLUKgAjyG9B0ZhUEXp9eVa7h4L__FDW3uV)[Subscribe on YouTube (62.5K / 100K) →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Pocket Casts](https://pca.st/episode/327be80a-3215-46f7-a5c3-c77be547f7a4)[Castbox](https://castbox.fm/episode/id2508485-id505154127)[Castro](https://castro.fm/episode/65l5St)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss) **Making the Web Easier to Build ** is a CodingCat.dev podcast episode featuring Una Kravets alongside Alex Patterson and Brittney Postma focused on CSS, Career, Builder.io. Una Kravets is a DevRel extraordinaire making CSS magic at Google. Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=8wVPvZe5aZc) or explore the architectural notes, chapters, and official documentation links below. ## Questions - Can you give us some background on how you got here? - Transition DevRel lead at Google - Job at Web platform for chrome and dev tools - What is the connection between Chromium and Chrome Browser? - We are going to have an entire episode on OpenUI, but could you give us a brief overview of it? - What was the inspiration behind web.dev?What are your goals for the web.dev? - How did you get started with the Toolsday Podcast? - How closely do you work with other browser teams? - What is Cascade Layers?[https://developer.chrome.com/blog/cascade-layers/](https://developer.chrome.com/blog/cascade-layers/) - Can you use !important? - What is your favorite CSS trick? [https://web.dev/one-line-layouts/](https://web.dev/one-line-layouts/) - [http://1linelayouts.glitch.me/](http://1linelayouts.glitch.me/) - [https://una.im/](https://una.im/) - What is your favorite new CSS feature? - What is one thing you can do to make your site better? ### Alex Patterson useHooks - [https://usehooks-ts.com/](https://usehooks-ts.com/) CSS Podcast - [https://thecsspodcast.libsyn.com/](https://thecsspodcast.libsyn.com/) ## Technical Overview: Making the Web Easier to Build 2.18 - Making the Web Easier to Build with Una Kravets: Una Kravets is a DevRel extraordinaire making CSS magician at Google. https://codingcat.dev/podcast/2-18-making-the-web-easier-to-build-with-una-kavets Sponsors https://Builder.io Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whole- When applying the concepts from **Making the Web Easier to Build** in a production codebase, teams working with CSS, Career, Builder.io should align their implementation with the [**MDN CSS Reference**](https://developer.mozilla.org/en-US/docs/Web/CSS) (Modern layout, Grid, Flexbox, animations, and cascade layers). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales. ### Key Engineering Takeaways - **Core Topic Focus: ** Practical strategies for CSS, Career, Builder.io covered in "Making the Web Easier to Build" (Una Kravets is a DevRel extraordinaire making CSS magic at Google.). - **Production Implementation: ** Combine the architectural patterns demonstrated in this podcast with the official [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS) for type safety, performance, and long-term maintainability. - **Hands-On Video Walkthrough: ** Follow along with the live coding demos and discussion on [YouTube (Making the Web Easier to Build)](https://www.youtube.com/watch?v=8wVPvZe5aZc) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives. ## Video Chapters & Timestamps Jump directly to any segment of [**Making the Web Easier to Build**](https://www.youtube.com/watch?v=8wVPvZe5aZc) on YouTube using the timestamped chapters below: - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): AM (EST) - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Intro - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Una Intro - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): lobotomized owl - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Una's Background - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Web Platform - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Chrome Dev Tools - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Adam Argyle shout out - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Landing new features faster - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Chrome vs Chromium - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): OpenUI - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Web.dev Inspiration - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Can you apply to write on Web.dev - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Builder.io Sponsor - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Speed Test and Core Web Vitals - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Toolsday and CSS Podcast - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Video series - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Cross browser working group - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): Cascade Layers - [**00:00**](https://www.youtube.com/watch?v=8wVPvZe5aZc&t=0s): BEM naming ## Resources, Links & Official Documentation - **Watch on YouTube: ** [Making the Web Easier to Build Full Video](https://www.youtube.com/watch?v=8wVPvZe5aZc) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1)) - **builder.io: ** [https://Builder.io](https://builder.io/?utm_source=codingcatdev) - **Show Pick: ** [PageSpeed Insigths (picked by Brittney Postma)](https://pagespeed.web.dev/) - **Show Pick: ** [Hamilton Beach Blender (picked by Brittney Postma)](https://www.amazon.com/Hamilton-Beach-51131-Single-Serve-Raspberry/dp/B00QNUCV0I/ref=sr_1_3?keywords=hamilton%2Bbeach%2Bblender&qid=1644843398&sr=8-3&th=1) - **Show Pick: ** [Screenflow (picked by Una Kravets)](https://screenflow.en.softonic.com/mac) - [**Una Kravets Guest Profile & Episodes on CodingCat.dev**](/guest/una-kravets) - [**Una Kravets on GitHub**](https://github.com/Una) - [**MDN CSS Reference:**](https://developer.mozilla.org/en-US/docs/Web/CSS) Modern layout, Grid, Flexbox, animations, and cascade layers - [**roadmap.sh Developer Career Paths:**](https://roadmap.sh/) Structured engineering skill trees, system design, and career progression - [**Builder.io Developer Documentation:**](https://www.builder.io/c/docs/developers?utm_source=codingcatdev) Visual headless CMS, SDKs, and design-to-code workflows ## Related CodingCat.dev Tutorials & Podcast Episodes - [**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. - [**Creating and Using Kendo UI**](/podcast/2-24-making-progress-with-kendo-ui): We have Alyssa Nicoll and Kathryn Grayson from Progress teach us all about KendoUI and how they maintain this frontend library. - [**Creative Coding to Boost your Skills**](/podcast/2-10-creative-coding-to-boost-your-skills): Brittney sits down with Jhey Tompkins and talks about how to be creative while improving your skills. ## Frequently Asked Questions (FAQ) ### What are the main takeaways from Making the Web Easier to Build? Una Kravets is a DevRel extraordinaire making CSS magic at Google. 2.18 - Making the Web Easier to Build with Una Kravets: Una Kravets is a DevRel extraordinaire making CSS magician at Google. https://codingcat.dev/podcast/2-18-making-the-web-easier-to-build-with-una-kavets Sponsors https://Builder.io Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whole- Throughout this podcast, Una Kravets breaks down real-world implementation details for CSS, Career, Builder.io so developers can apply these patterns directly in production. ### How do you implement CSS best practices in production? When adopting CSS and Career in a production stack, start by validating your configuration against the [**MDN CSS Reference**](https://developer.mozilla.org/en-US/docs/Web/CSS) (Modern layout, Grid, Flexbox, animations, and cascade layers). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage. ### Where can I watch the full Making the Web Easier to Build walkthrough and find related code resources? You can watch the complete video session for [**Making the Web Easier to Build**](https://www.youtube.com/watch?v=8wVPvZe5aZc) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into CSS, check out our related guide: [**Open Props - an Open Source CSS Props Library**](/podcast/2-6-open-props-an-open-source-css-props-library). ## ✏️ Episode Summary 2.18 - Making the Web Easier to Build with Una Kravets: Una Kravets is a DevRel extraordinaire making CSS magician at Google. https://codingcat.dev/podcast/2-18-making-the-web-easier-to-build-with-una-kavets Sponsors https://Builder.io Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whole- ✏️ Visual Architecture Diagram ## how this episode connects together. Follow AJ from first principles to production-ready architecture. Let’s build it!✏️ Visual Diagram: Making the Web Easier to Build✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Making the Web Easier to Build: start with Una Kravets, implement Architecture & Patterns, and ship to production.AAA Contrast Verified ## episode picks. ### 🐾 Alex Patterson - [useHooks](https://usehooks-ts.com/) - [CSS Podcast](https://thecsspodcast.libsyn.com/) ### 🐾 Brittney Postma - [PageSpeed Insigths](https://pagespeed.web.dev/) - [Hamilton Beach Blender](https://www.amazon.com/Hamilton-Beach-51131-Single-Serve-Raspberry/dp/B00QNUCV0I/ref=sr_1_3?keywords=hamilton%2Bbeach%2Bblender&qid=1644843398&sr=8-3&th=1) ### 🐾 Una Kravets - [Screenflow](https://screenflow.en.softonic.com/mac) ## related episodes. [All Episodes→](/podcasts)[![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. [![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)[![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. [![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)