Video Screencasts

Using 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? … Read article “#179: A Grid of Squares”

I 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 … Read article “#178: Percy Catches Visual Changes in any Workflow”

This 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 … Read article “#177: Local WordPress Development to Production Workflow”

Matt 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 … Read article “#176: Working with Framer Motion”

(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, … Read article “#175: 7 Things to Know About Webflow”

There is a feature of Chrome DevTools that lets you:

1. See the code of any given resource the current web page is using (like CSS and JavaScript).
2. “Pretty Print” it

And 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, … Read article “#173: Ooooops I guess we’re full-stack developers now.”

I 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 … Read article “#172: Hand SVGing a Curved Line”

The same basic idea as the cards on the homepage of v17 of this site. … Read article “#171: Movable Stacked Card Row in CSS”

Fair 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 … Read article “#170: Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project”

This 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

I’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. … Read article “#168: CSS-in-JS”

This 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 … Read article “#167: Sponsored Videos for Jetpack and WooCommerce”

Did 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 … Read article “#166: Learn to Integrate Visual Testing with Percy”

David 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 … Read article “#165: Building Your Backend with Serverless Functions”

WooCommerce 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 … Read article “#164: Basic WooCommerce Walkthrough”

David 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 … Read article “#163: First Steps with Serverless”

David Wells, from Netlify, and I take a crack at answering this question in an understandable way.

Are there still servers involved? Of course, but you don’t manage them, … Read article “#162: What the Heck is Serverless?”

Jetpack sponsored this video, which goes into what Jetpack is and can do for your site.

These are my words though! I’m a big Jetpack fan and I run Jetpack … Read article “#161: Jetpack”

The internet is, without metaphor, just a bunch of servers tied together with wires. Without servers, we’d have no way to share our creations with the world. Yet, in a … Read article “#160: The All-Powerful Front-End Developer”