CSS-Tricks Screencasts
213 episodes - English - Latest episode: over 2 years ago - ★★★★★ - 86 ratingsCSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design. Code samples can be extremely helpful, but sometimes it is even more helpful to watch someone as they code. In CSS-Tricks Screencasts will show you real live CSS and HTML code being written and tested right on the screen. Topics will vary but will always center around design and usability.
Homepage Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed
Episodes
#211: Building a Paid Subscription Newsletter with MailPoet + WooCommerce + WordPress
August 16, 2021 14:56 - 31 minutes - 1.37 GB VideoWith MailPoet and WooCommerce, we can build a paid subscription newsletter into a WordPress website. Our only costs are transaction fees, whatever WordPress hosting we might need, and a yearly fee for WooCommerce Subscriptions, making it a very cost-friendly …
#210: Yapping About Astro
August 09, 2021 19:15 - 26 minutes - 1.12 GB VideoI think Astro is a pretty cool bit of technology for building websites! Should we call it a framework? We’ll get into that in the video. How can we call it a framework if it asks you to “bring your …
#209: A Netflix Clone with DataStax Astra and Netlify
August 06, 2021 20:32 - 50 minutes - 961 MB VideoI paired up with David Jones-Gilardi of DataStax to go through one of the workshops they have put together (with Ania Kubów, who has a video you should watch as well) that does a good job of showcasing how …
#208: A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other
July 30, 2021 20:07 - 21 minutes - 953 MB VideoThis is the video version of a blog post we did asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side? It’s a satisfying answer because …
#207: Performance Testing CSS-Tricks with WebPageTest
July 23, 2021 21:50 - 1 hour - 1.36 GB VideoI get a hands-on performance review with Tim Kadlec of WebPageTest! This is a real honor as Tim is a real performance guru who knows WebPageTest in and out. I’m all about getting a little free consulting helping y’all …
#206: Building a Data-Backed Next.js Site with Prisma & App Platform
July 12, 2021 23:23 - 42 minutes - 809 MB VideoI’m joined by Chris Sev from Digital Ocean to talk about their new App Platform. We’re going to use it to build a little website. The site will be blog-like: posts with IDs, titles, content, and the more dynamic …
#205: Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks
March 15, 2021 21:53 - 19 minutes - 826 MB VideoHow it works You apply position: sticky; to an element along with a top, left, right, or bottom threshold and it will “stick” in that position when the threshold is passed, as long as there is room …
#204: Using the axe DevTools Web Accessibility Testing Browser Plugin
March 04, 2021 23:11 - 31 minutes - 1.38 GB VideoIn this video, I’m joined by Preety Kumar of Deque to take a look at their DevTools plugin for axe. Short story: this is an amazing plugin that helps you quickly find accessibility problems on any website, then helps …
#203: A First Look at Cloudflare Pages
March 03, 2021 00:30 - 29 minutes - 1.3 GB VideoCloudflare Pages is Jamstack hosting, meaning it’s a static file host that runs your builds and lets you do dynamic things with JavaScript and services. You might normally think of Cloudflare as something you put in front of your site’s …
#202: Centered List Markers
January 15, 2021 15:59 - 10 minutes - 465 MB VideoLike so many things CSS, there is all sorts of little stuff to know, even something as minuscule as centering a list marker. A reader wrote in with a screenshot of what they were trying to accomplish — basically an …
#201: Doing Booping
December 21, 2020 15:01 - 15 minutes - 706 MB VideoJoshua Comeau crowd-coined the term “boop” (high five, Adam Kuhn). These are sorta like hover/focus states, except that they aren’t. Your thingies — things like links, buttons, etc. — should still have those states. A “boop” is a more …
#200: Scroll to Zoom
December 10, 2020 15:56 - 10 minutes - 304 MB VideoFair warning: you aren’t going to need this every day! I just happened to be looking at a neat little SVG warping tool that had a feature where my mouse scroll wheel (or trackpad) could be used to zoom the …
#199: Messing with JSX
December 09, 2020 23:29 - 12 minutes - 553 MB VideoI probably should have learned this long ago, but alas, here we are. Turns out you can tell what function you want JSX to use. Yep, JSX really only has one primary transformation that it does. It turns angle brackets …
#198: About the Position Property
November 20, 2020 15:51 - 13 minutes - 619 MB Videostatic: the default relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context absolute: top/right/bottom/left moves the element …
#197: A Look at Stackbit and Stackbit Studio
November 02, 2020 16:01 - 40 minutes - 1.74 GB VideoThe Stackbit app helps you kick out a new Jamstack site very quickly. Pick a theme, a static site generator, and a CMS and it’ll get a repo going for you on the double. Stackbit has gotten much more powerful …
#196: Learning Grid & Flexbox with Kyle Simpson
October 30, 2020 18:58 - 1 hour - 2.58 GB VideoKyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn’t as up-to-date on modern CSS layout tools like flexbox and grid. We didn’t go from 0 to 100 here, but …
#195: How to Draw a Line with CSS
September 25, 2020 19:15 - 16 minutes VideoStupid simple, right? It is! But it’s fun to think about for a few minutes and count a bunch of different ways we could do it. And what do I mean by a line anyway? We’ll mostly talk about a …
#194: Jetpack’s Social Integration
September 24, 2020 21:32 - 7 minutes - 343 MB VideoJetpack can help automate your site’s social media. It’s a pretty small feature compared to all the huge stuff Jetpack can do, like improve your site’s search, back it up, and protect it. But it’s a …
#193: Scully: the SSG for Angular
September 23, 2020 14:50 - 1 hour - 2.76 GB VideoTara Z. Manicsic joined me for this video, setting up the very basics of Scully, which is a Static Site Generator for Angular — nay, the SSG for Angular, as Tara pointed out to me. I don’t know much Angular …
#192: Git Tricks for Getting Yourself Out of Trouble
September 14, 2020 23:43 - 1 hour - 3.08 GB VideoAs amazing as Git is for handling your source code, you can certain git (lol) yourself into trouble. What if you make a change to a file and you want to get rid of the change? What if you just …
#191: Learn by doing: CUBE CSS
August 11, 2020 01:10 - 1 hour - 3.07 GB VideoAndy Bell joins me to talk through his CSS methodology he calls CUBE CSS. That’s Composition, Utility, Block, and Exception.…
#190: CSS Custom Properties Penetrate the Shadow DOM
July 28, 2020 17:58 - 16 minutes - 723 MB VideoOne of the whole points of the Shadow DOM is that it provides encapsulation. No styles out, no styles in. But there are ways “through” the Shadow DOM, and one of them that is pretty cool and useful is using …
#189: Notion for Personal & Public Use
June 05, 2020 19:22 - 21 minutes - 988 MB VideoThis is the last video in our little series on using Notion. We’ve covered how Notion is great for working on web development teams. But another thing that makes Notion great is that it’s useful for yourself too. …
#188: Exploring the Overlapping Header Pattern
May 29, 2020 22:26 - 27 minutes - 1.2 GB VideoSnook published an article titled “Overlapping Header with CSS Grid” where he looks at a header design pattern that I feel transcends trends and has been popular forever. The idea is that the header is oversized and the …
#187: Notion for Team Meetings & Documentation
May 25, 2020 22:03 - 30 minutes - 1.32 GB VideoThis is the second video in 3-video series on using Notion. In Part 1 we covered a lot of ground on what Notion is how it’s great for any team, and web development teams in particular. In this video, …
#186: Notion for Web Development Teams
May 13, 2020 21:31 - 49 minutes - 2.16 GB VideoI’m a big fan of Notion, particularly for keeping teams in sync. I work on teams of developers, and I find it works particularly well for that. If I had to sum it up really quickly, I’d tell Notion …
#185: Playing with CSS Masks
May 13, 2020 14:48 - 23 minutes - 575 MB VideoMasking in CSS is one way to hide parts of the element and show others. Another is clip-path, but let’s not focus on that today. “Masks are images; Clips are paths” is one way to think about the difference…
#184: Inside & Aligned Lists
May 05, 2020 22:08 - 18 minutes - 437 MB VideoThe fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but …
#185: Inside & Aligned Lists
May 05, 2020 22:08The fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but doing it that the easy way means losing the really nice alignment we got for free with outside list markers. We want it both ways! Let’s do that with our own custom counters, CSS grid (with subgrid), and some more … Read article “#185: Inside & Aligned Lists”
#183: Art Directing Images, the Picture Element, and Image CDNs
April 21, 2020 23:58 - 27 minutes - 665 MB VideoIt’s a bonafide phenomenon! I’m talking about the idea of image hosting services that allow you to manipulate the URL to the image in order to transform it. In other words, if you need multiple copies of an …
#182: Baby’s First Vue SFC
April 16, 2020 14:33 - 11 minutes - 292 MB VideoSFC as in “Single File Component” which is something that Vue offers and Vue people seem to love. I’ve written very little Vue in my days, but I’m a fan! We recently started supporting Vue SFC’s on CodePen, so this …
#181: Poking at HTML Lists
April 15, 2020 00:33 - 16 minutes - 430 MB VideoI had a dumb little issue the other day where a nested list didn’t quite have the right spacing. I was only adding margin-bottom on the list elements and the lists themselves, but that meant there was no space between …
#180: Tinkering with Video on Mobile
April 08, 2020 21:19 - 15 minutes - 474 MB VideoFair warning: I’m no expert on this stuff, I’m just playing around with video on the web and addressing some issues I have when showing off video clips in blog posts. I have an iOS simulator up in this video, …
#179: A Grid of Squares
April 06, 2020 21:22 - 16 minutes - 405 MB VideoUsing CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? It’s possible, but it involves a little trickery. In this …
#178: Percy Catches Visual Changes in any Workflow
November 06, 2019 16:50 - 27 minutes - 1.19 GB VideoI wanted to make sure you understand exactly what Percy can do for you, hence the title. When you commit a change to your websites Git repo, like in a Pull Request workflow most of us live in, Percy will …
#177: Local WordPress Development to Production Workflow
November 04, 2019 19:03 - 12 minutes - 551 MB VideoThis is the basics of how I work locally with a WordPress site, and then getting it to production. Flywheel is a sponsor of CSS-Tricks, and I’m glad they are because they make great products. Flywheel is at the heart …
#176: Working with Framer Motion
October 28, 2019 17:18 - 43 minutes - 1.92 GB VideoMatt Perry from Framer and I take a look at the React animation library Framer Motion. First, we take a look at how simple the API is. You control everything very declaratively through props on elements in your JSX. …
#175: 7 Things to Know About Webflow
October 10, 2019 19:45 - 37 minutes - 1.65 GB Video(This is a sponsored video I worked on between us at CSS-Tricks and Webflow. I think Webflow is a fascinating product for building websites that is, in my opinion, in a category all to itself at the moment. It …
#174: Using Local Overrides in DevTools
August 08, 2019 15:01 - 11 minutes - 496 MB VideoThere is a feature of Chrome DevTools that lets you: See the code of any given resource the current web page is using (like CSS and JavaScript). “Pretty Print” it (format it for readability) Save it to disk Use that …
#173: Ooooops I guess we’re full-stack developers now.
August 07, 2019 16:23 - 46 minutes - 851 MB VideoAnd by “we’re”, I mean us, front-end developers ;) Here’s the website that goes with this talk. This is a talk I put together where I postulate that, over time, the breadth of what front-end developers are able to do …
#172: Hand SVGing a Curved Line
August 06, 2019 15:12 - 17 minutes - 445 MB VideoI find that 98% of all my SVG usage comes from pre-created SVG files or vector art in some design software that I ultimately export as SVG. Not super often am I hand-manipulating the coordinates of things in the SVG …
#171: Movable Stacked Card Row in CSS
April 29, 2019 14:38 - 13 minutes - 311 MB VideoThe same basic idea as the cards on the homepage of v17 of this site. …
#170: Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project
March 05, 2019 00:35 - 42 minutes - 1 GB VideoFair warning! This isn’t a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all going. This is about documenting the real-world experience of doing this kind of work. …
#169: How to Think Like a Front-End Developer
February 07, 2019 20:26 - 43 minutes - 242 MB VideoThis is a video from my talk at WordCamp US. Let’s take a peek at what front-end development has become these days. Starting from what the role is, where we sit, and the expectations of us. Then we’ll get into …
#168: CSS-in-JS
January 09, 2019 15:17 - 1 hour - 1.18 GB VideoI’m joined by Dustin Schau in this video and he is going to take me on a tour of the world of what has come to be known as CSS-in-JS. That is, doing your styling entirely in JavaScript, rather than …
#167: Sponsored Videos for Jetpack and WooCommerce
December 05, 2018 14:32 - 17 minutes - 167 MB VideoThis is a compilation of four videos I’ve done over the last few months for a sponsorship with Automattic. It’s mostly about Jetpack, a WordPress plugin I quite like and that we use here at CSS-Tricks), but also …
#166: Learn to Integrate Visual Testing with Percy
October 25, 2018 16:21 - 36 minutes - 870 MB VideoDid you know that you can set up a review system so that every pull request you make shows you exactly what has changed visually on your site? That’s exactly what Percy does. It assumes what you have on master …
#165: Building Your Backend with Serverless Functions
October 18, 2018 14:17 - 29 minutes - 684 MB VideoDavid Wells & Chris Coyier talk about how you can build an app hosted on Netlify statically but still have a backend database to power it. We use the classic TODO app example where the database is powered by FaunaDB …
#164: Basic WooCommerce Walkthrough
August 17, 2018 15:15 - 11 minutes - 497 MB VideoWooCommerce is a powerful and flexible eCommerce plugin for WordPress. Wanna sell subscriptions or memberships? WooCommerce can do that? Digital downloads? Yep. Appointments and bookings? Sure. But the meat and potatoes of eCommerce, so to speak, is …
#163: First Steps with Serverless
July 06, 2018 17:47 - 21 minutes - 948 MB VideoDavid Wells, from Netlify, and I take some baby steps into building things with Serverless. We’ll mostly be looking at cloud functions here and how using them from an otherwise static hosting environment means you’ve unlocked all sorts of …