CSS-Tricks Screencasts by CSS-Tricks

08.09.2021

#210: Yapping About Astro

pI think Astro is a pretty cool bit of technology for building websites! Should we call it a framework? We#8217;ll get into that in the video. How can we call it a framework if it asks you to #8220;bring your...

08.06.2021

#209: A Netflix Clone with DataStax Astra and Netlify

pI paired up with a href=https://twitter.com/sonicdmg rel=noopenerDavid Jones-Gilardi/a of DataStax to go through a href=https://github.com/datastaxdevs/appdev-week3-graphql rel=noopenerone of the workshops/a they have put together (with a href=https://www.youtube.com/channel/UC5DNytAJ6_FISueUfzZCVsw rel=noopenerAnia Kubów/a, who has a href=https://www.youtube.com/watch?v=g8COh40v2jU rel=noopenera video/a you should watch as well)...

07.30.2021

#208: A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other

pThis is the video version of a href=https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/a blog post we did/a asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the othernbsp;side?/p pIt#8217;s a satisfying answer because...

07.23.2021

#207: Performance Testing CSS-Tricks with WebPageTest

pI get a hands-on performance review with a href=https://timkadlec.com/ rel=noopenerTim Kadlec/a of a href=https://webpagetest.org/ rel=noopenerWebPageTest/a! This is a real honor as Tim is a real performance guru who knows WebPageTest in and out. I#8217;m all about sgetting a little free...

07.12.2021

#206: Building a Data-Backed Next.js Site with Prisma & App Platform

pI#8217;m joined by a href=https://twitter.com/chris__sev?lang=en rel=noopenerChris Sev/a from a href=https://www.digitalocean.com/ rel=noopenerDigital Ocean/a to talk about their new a href=https://try.digitalocean.com/css-tricks/?utm_medium=partneramp;utm_source=csstricksamp;utm_campaign=global_brand_video_enamp;utm_content=conversion rel=noopenerApp Platform/a. We#8217;re going to use it to build a little website. The site will be blog-like: posts with IDs, titles,...

03.15.2021

#205: Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks

How it works pYou apply codea href=https://css-tricks.com/almanac/properties/p/position/#stickyposition: sticky;/a/code to an element along with a codetop/code, codeleft/code, coderight/code, or codebottom/code threshold and it will #8220;stick#8221; in that position when the threshold is passed, as long as there is room hellip;/p

03.04.2021

#204: Using the axe DevTools Web Accessibility Testing Browser Plugin

pIn this video, I#8217;m joined by a href=https://twitter.com/accessibility20 rel=noopenerPreety Kumar/a of a href=https://www.deque.com/css-tricks/ rel=noopenerDeque/a to take a look at their a href=https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US rel=noopenerDevTools plugin/a for a href=https://www.deque.com/axe/ rel=noopeneraxe/a. Short story: this is an emamazing/em plugin that helps you quickly find...

03.03.2021

#203: A First Look at Cloudflare Pages

pa href=https://pages.cloudflare.com/ rel=noopenerCloudflare Pages/a is Jamstack hosting, meaning it#8217;s a static file host that runs your builds and lets you do a href=https://www.cloudways.com/blog/cloudflare-hosting/?id=1223312amp;data1=ArticleLink target=_blank rel=noreferrer noopenerdynamic things/a with JavaScript and services. You might normally think of Cloudflare as something you...

01.15.2021

#202: Centered List Markers

pLike so many things CSS, there is all sorts of little stuff to know, even something as minuscule as centering a list marker./p pA reader wrote in with a screenshot of what they were trying to accomplish — basically an hellip;/p

12.21.2020

#201: Doing Booping

pJoshua Comeau crowd-coined the term a href=https://www.joshwcomeau.com/react/boop/ rel=noopener#8220;boop#8221;/a (high five, a href=https://twitter.com/cobra_winfrey/status/1324104607539306497 rel=noopenerAdam Kuhn/a). These are sorta like hover/focus states, except that they aren#8217;t. Your thingies — things like links, buttons, etc. — should still have those states. A #8220;boop#8221;...

12.10.2020

#200: Scroll to Zoom

pFair warning: you aren#8217;t going to need this every day! I just happened to be looking at a href=https://github.com/PavelLaptev/warp-svg rel=noopenera neat little SVG warping tool/a that had a feature where my mouse scroll wheel (or trackpad) could be used to...

12.09.2020

#199: Messing with JSX

pI 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...

11.20.2020

#198: About the Position Property

ullistrongcodestatic/code:/strong the default /lilistrongcoderelative/code:/strong allows you to nudge around with codetop/code/coderight/code/codebottom/code/codeleft/code, making codez-index/code work, gives you a positioning context/lilistrongcodeabsolute/code:/strong codetop/code/coderight/code/codebottom/code/codeleft/code moves the element /li/ulhellip;

11.02.2020

#197: A Look at Stackbit and Stackbit Studio

pThe a href=https://www.stackbit.com/ rel=noopenerStackbit/a app helps you kick out a new Jamstack site emvery/em quickly. Pick a theme, a static site generator, and a CMS and it#8217;ll get a repo going for you on the double. Stackbit has gotten much...

10.30.2020

#196: Learning Grid & Flexbox with Kyle Simpson

pKyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn#8217;t as up-to-date on modern CSS layout tools like a href=https://css-tricks.com/snippets/css/a-guide-to-flexbox/flexbox/a and a href=https://css-tricks.com/snippets/css/complete-guide-grid/grid/a. We didn#8217;t go from 0 to 100 here,...

09.25.2020

#195: How to Draw a Line with CSS

pStupid simple, right? It is! But it#8217;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#8217;ll mostly talk about a...

09.24.2020

#194: Jetpack’s Social Integration

pJetpack can help a href=https://jetpack.com/features/traffic/automatic-publishing/?aff=8638 rel=noopenerautomate your site#8217;s social media/a. /p pIt#8217;s a pretty small feature compared to all the huge stuff Jetpack can do, like a href=https://jetpack.com/support/search/?aff=8638 rel=noopenerimprove your site#8217;s search/a, a href=https://jetpack.com/upgrade/backup/?aff=8638 rel=noopenerback it up/a, and a href=https://jetpack.com/support/security-features/?aff=8638 rel=noopenerprotect...

09.23.2020

#193: Scully: the SSG for Angular

pTara Z. Manicsicnbsp;joined me for this video, setting up the very basics of a href=https://scully.io/ rel=noopenerScully/a, which is a Static Site Generator for Angular — nay, emthe/em SSG for Angular, as Tara pointed out to me./p pI don#8217;t know much Angular...

09.14.2020

#192: Git Tricks for Getting Yourself Out of Trouble

pAs amazing as Git is for handling your source code, you can certain emgit/em (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...

08.11.2020

#191: Learn by doing: CUBE CSS

pAndy Bell joins me to talk through his CSS methodology he calls a href=https://piccalil.li/blog/cube-css/ rel=noopenerCUBE CSS/a. That#8217;s strongC/strongomposition, strongU/strongtility, strongB/stronglock, and strongE/strongxception.hellip;/p

07.28.2020

#190: CSS Custom Properties Penetrate the Shadow DOM

pOne of the whole points of the Shadow DOM is that it provides encapsulation. No styles out, no styles in. But there are ways #8220;through#8221; the Shadow DOM, and one of them that is pretty cool and useful is using...

06.05.2020

#189: Notion for Personal & Public Use

pThis is the last video in our little series on using Notion. We#8217;ve covered how Notion is great for working on web development teams. But another thing that makes Notion great is that it#8217;s useful for emyourself/em too. hellip;/p

05.29.2020

#188: Exploring the Overlapping Header Pattern

pSnook published an article titled #8220;a href=https://snook.ca/archives/html_and_css/overlapping-header-with-css-grid rel=noopenerOverlapping Header with CSS Grid/a#8221; 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...

05.25.2020

#187: Notion for Team Meetings & Documentation

pThis is the second video in 3-video series on using a href=https://bit.ly/chrisnotion rel=noopenerNotion/a. In Part 1 we covered a lot of ground on what Notion is how it#8217;s great for any team, and web development teams in particular./p pIn this video,...

05.13.2020

#186: Notion for Web Development Teams

pI#8217;m a big fan of a href=https://bit.ly/chrisnotionweb rel=noopenerNotion/a, 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#8217;d tell...

05.13.2020

#185: Playing with CSS Masks

pMasking in CSS is one way to hide parts of the element and show others. Another is codeclip-path/code, but let#8217;s not focus on that today. em#8220;Masks are images; Clips are paths#8221;/em is one way to think about the a href=https://css-tricks.com/clipping-masking-css/#article-header-id-0difference/ahellip;/p

05.05.2020

#184: Inside & Aligned Lists

pThe fact that lists render their markers emoutside/em 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...

04.21.2020

#183: Art Directing Images, the Picture Element, and Image CDNs

pIt#8217;s a bonafide emphenomenon/em!/p pI#8217;m talking about the idea of image hosting services that allow you to strongmanipulate the URL to the image in order to transform it/strong. In other words, if you need multiple copies of an hellip;/p

04.16.2020

#182: Baby’s First Vue SFC

pSFC as in #8220;Single File Component#8221; which is something a href=https://vuejs.org/v2/guide/single-file-components.html rel=noopenerthat Vue offers/a and Vue people seem to love. I#8217;ve written emvery little/em Vue in my days, but I#8217;m a fan! We recently started supporting Vue SFC#8217;s on CodePen,...

04.15.2020

#181: Poking at HTML Lists

pI had a dumb little issue the other day where a emnested/em list didn#8217;t quite have the right spacing. I was only adding codemargin-bottom/code on the list elements and the lists themselves, but that meant there was no space between...

04.08.2020

#180: Tinkering with Video on Mobile

pstrongFair warning:/strong I#8217;m no expert on this stuff, I#8217;m just playing around with video on the web and addressing some issues I have when showing off video clips in blog posts./p pI have an iOS simulator up in this video, hellip;/p

04.06.2020

#179: A Grid of Squares

pUsing 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#8217;s possible, but it involves a little trickery. In this...

11.06.2019

#178: Percy Catches Visual Changes in any Workflow

pI wanted to make sure you understand exactly what a href=https://percy.io/ rel=noopenerPercy/a 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,...

11.04.2019

#177: Local WordPress Development to Production Workflow

pThis is the basics of how I work locally with a WordPress site, and then getting it to production./p pa href=https://share.getf.ly/k96n2f rel=noopenerFlywheel/a is a emsponsor/em of CSS-Tricks, and I#8217;m glad they are because they make great products. Flywheel is at the...

10.28.2019

#176: Working with Framer Motion

pa href=https://twitter.com/mattgperry rel=noopenerMatt Perry/a from Framer and I take a look at the React animation library a href=https://www.framer.com/motion?utm_source=youtube#038;utm_medium=launch_post#038;utm_campaign=FR-owned-css-tricks rel=noopenerFramer Motion/a. /p pFirst, we take a look at how simple the API is. You control everything very declaratively through props on elements...

10.10.2019

#175: 7 Things to Know About Webflow

p(This is a sponsored video I worked on between us at CSS-Tricks and a href=https://wfl.io/css-tricks rel=noopenerWebflow/a. I think Webflow is a fascinating product for building websites that is, in my opinion, in a category all to itself at the moment....

08.08.2019

#174: Using Local Overrides in DevTools

pThere is a feature of Chrome DevTools that lets you:/p ol liSee the code of any given resource the current web page is using (like CSS and JavaScript)./li li#8220;Pretty Print#8221; it (format it for readability)/li liSave it to disk/li listrongUse that /strong/li/olhellip;

08.07.2019

#173: Ooooops I guess we’re full-stack developers now.

pAnd by #8220;we#8217;re#8221;, I mean us, front-end developers ;)/p p class=explanationa href=https://full-stack.netlify.com/ rel=noopenerHere#8217;s the website/a that goes with this talk./p pThis is a talk I put together where I postulate that, over time, the breadth of what front-end developers are able to...

08.06.2019

#172: Hand SVGing a Curved Line

pI 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...

04.29.2019

#171: Movable Stacked Card Row in CSS

pThe same basic idea as the cards on the homepage of v17 of this site. hellip;/p

03.05.2019

#170: Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project

p class=explanationFair warning! This isn#8217;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...

02.07.2019

#169: How to Think Like a Front-End Developer

pThis is a video from my talk at WordCamp US. /p blockquotepLet’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...

01.09.2019

#168: CSS-in-JS

pI#8217;m joined by a href=https://dustinschau.com/ rel=noopenerDustin Schau/a 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,...

12.05.2018

#167: Sponsored Videos for Jetpack and WooCommerce

pThis is a compilation of four videos I#8217;ve done over the last few months for a sponsorship with Automattic. It#8217;s mostly about a href=https://jetpack.com/?aff=8638 rel=noopenerJetpack/a, a WordPress plugin I quite like and that a href=https://css-tricks.com/jetpack/we use here at CSS-Tricks/a), but...

10.25.2018

#166: Learn to Integrate Visual Testing with Percy

pDid you know that you can set up a review system so that strongevery pull request you make shows you exactly what has changed visually on your site?/strong/p pThat#8217;s exactly what a href=https://percy.io/ rel=noopenerPercy/a does. It assumes what you have on...

10.18.2018

#165: Building Your Backend with Serverless Functions

pDavid Wells #038; 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...

08.17.2018

#164: Basic WooCommerce Walkthrough

pa href=https://woocommerce.com/?aff=8638 rel=noopenerWooCommerce/a is a powerful and flexible eCommerce plugin for WordPress. Wanna sell a href=https://woocommerce.com/products/woocommerce-subscriptions/?aff=8638 rel=noopenersubscriptions/a or a href=https://woocommerce.com/products/woocommerce-memberships/?aff=8638 rel=noopenermemberships/a? WooCommerce can do that? a href=https://docs.woocommerce.com/document/digital-downloadable-product-handling/?aff=8638 rel=noopenerDigital downloads/a? Yep. a href=https://woocommerce.com/products/woocommerce-bookings/?aff=8638 rel=noopenerAppointments and bookings/a? Sure. /p pBut the meat and...

07.06.2018

#163: First Steps with Serverless

pDavid Wells, from a href=https://netlify.com/?utm_source=css-tricks#038;utm_medium=display#038;utm_campaign=0718 rel=noopenerNetlify/a, and I take some baby steps into building things with Serverless. We#8217;ll mostly be looking at cloud functions here and how using them from an otherwise static hosting environment means you#8217;ve unlocked all sorts...

07.05.2018

#162: What the Heck is Serverless?

pDavid Wells, from a href=https://netlify.com/?utm_source=css-tricks#038;utm_medium=display#038;utm_campaign=0718 rel=noopenerNetlify/a, and I take a crack at answering this question in an understandable way. /p pAre there still servers involved? Of course, but you don#8217;t manage them, scale them, or pay for them when you aren#8217;t...

06.14.2018

#161: Jetpack

pa href=https://jetpack.com/ rel=noopenerJetpack/a sponsored this video, which goes into what Jetpack is and can do for your site./p pThese are my words though! I#8217;m a big Jetpack fan and I run Jetpack on all my self-hosted WordPress sites. It does a...

What's CSS-Tricks Screencasts about?

Download our free app to listen on your phone

CSS-Tricks Screencasts episodes: