Working with Adult ADHD
Chris and Alex will talk about their experience with Adult ADHD, how it affects them, and strategies they use to still get things done.
Livestream Shows
Build a Hit Counter with Web Components & Lit!
We'll learn the basics of Web Components and the Lit framework, then query the Netlify API make a hit counter for our website!
A11y & Responsivity with GSAP
Cassie will show us the new gsap.matchMedia()! It's a new feature that makes responsive and accessible 'reduced motion' animations simple!
Behind the Scenes: Elegant Seagulls
Let's look behind the scenes of the new Elegant Seagulls website. Ryan, one of the developers, will walk us through the awesome animations, and show us how to recreate some of the components!
Behind the Scenes: Netlify's Homepage
Sam, Justin, and Ryan from Netlify will answer our questions about how they created the new Netlify homepage! The beautiful design and wonderful animations were crafted in part by these three, so let's talk shop!
Create a 3D Scroll Gallery with GSAP!
Tom will show us how to create an awesome scrolling gallery effect with GreenSock! Our gallery will have 3D and parallax effects, respond to mouse movements, and support any number of images. We'll even use the DrawSVG plugin for an added detail.
Blasting Off with Astro 1.0!
Ben Holmes of the Astro team is with us to walk us through creating the new Frontend Horse site in Astro 1.0! We'll learn what's new in Astro, where it's headed, and how to build with it.
Fluid Typography, Space, and Layouts!
We're going to learn how to create with consistent, fluidly scaling typography and spacing, all using CSS. Andy will show us some great techniques so that our website is consistent and looks great at every screen size.
Smooth Scrolling with GSAP!
Cassie Evans joins us to show us how to add smooth scrolling to a site in 2022, along with a fun reveal!
Responsive CSS the Easy Way
Ever find yourself lost in a confusing amount of media queries, struggling to make your website responsive? Kevin Powell is here to teach us the easy way to create responsive CSS.
Introducing Token CSS
Nate will introduce and demo a brand new tool for building design systems, Token CSS. We'll also chat about design token methodology, recent progress on the Design Tokens community group specification, and what the future plans for Token CSS are!
Self-Avoiding Random Walkers
Self-avoiding random walkers are a fun creative coding technique that can produce some beautiful results. Varun will show us how to use them to create beautiful art pieces.
Generate Images with Code using Cloudinary!
Hand-crafting images for sharing to social media is a thing of the past thanks to wonderful image APIs like Cloudinary! Colby Fayock is going to show us how to generate and style trading card images all through URL parameters!
Digging Deep into Media Queries!
In this episode we'll dig into media queries like reduced-motion, forced-colors, reduced-data, and dark-mode!
Animated Stick Figures with CSS!
CSS wizard Amit is back to show us how he's creating and animating stick figures with just CSS! We'll create a horse together, learning some of his advanced techniques.
Making a Fish Swim with Three.js!
Once you get 3D models imported to your scene, realistic animations can be tough to achieve. In this episode, we'll learn how to animate objects along a path, by bringing a swimming fish to life!
Simulating and Animating Fur with Three.js
Louis Hoebregts (Mamboleoo) is back to teach us how to simulate and animate fur on a 3d model! We'll learn how he used simplex noise to make a beautiful neon fox piece with fur that blows in the wind.
Building Better Agency Sites with Next.js and Prismic!
Dan Spratling will show us how he uses Prismic Slice Machine with Next.js to quickly build high-quality sites at his agency. We'll look through what he uses for his starter, and maybe make some improvements!
Building Consistent UIs with Open Props!
Open Props provides us with a lightweight baseline of web design tokens that we can use to craft consistent components in any framework. Its creator Adam comes on to show us how it all works!
Integrating APIs with StepZen GraphQL Studio
In this episode we'll learn how to connect numerous data sources together from popular third party APIs, databases, and headless CMSs with GraphQL queries.
Building a JavaScript Library from Scratch!
In order to learn some best practices, we'll build a date library from the ground up. We'll start simple and then layer in features through a series of edits and enhancements. We'll discuss a wide range of use cases and weigh the pros and cons.
Migrating to React 18
We're going to learn how to migrate our existing codebase to React 18, and we'll touch on some of the key features that come with the new release!
Building with Svelte!
We're going to learn Svelte, a JavaScript framework that compiles down to vanilla JS, letting you build robust but speedy apps and sites!
Generative Pattern Magic with CSS Houdini
George is going to teach us CSS Houdini, how to use the Paint API, and how we can make our own patterns with Houdini!
Twitch API Fun
We're going to use Next.js, the Twitch API, and Next Auth to make a fun Twitch powered web app!
Beautiful Page Transitions in Next.js
Page transitions make navigating a delightful experience for our users. Ryan will show us how we implement them in our Next.js site!
Advanced Search Features with Algolia!
Algolia allows us to add powerful search features to our Jamstack sites. In this episode we'll learn about features like routing, InstantSearch, autocomplete, and more!
Animating with Motion One
We'll learn how to use Motion One, a new, lightweight animation library built on the Web Animations API.
Make a Multiplayer Elimination Game!
Opher will show us how to build a multiplayer game with Pixi.js that features real-time audience participation! Each person will get their own generative character and we'll use Firebase for the real-time communication!
Building a Whimsical Course Platform
Josh walks us through how he built the platform for his new course, CSS for JavaScript Developers. We'll look into the stack, the decisions he made, and the whimsical animated touches he added!
Eleventy + CSS Candy Bag!
We're creating an audience-fueled generative website! You suggest components or features, then we build it live with 11ty and CSS!
Getting Into Open Source
We'll learn how to get into open source as a beginner, as well as tips for getting your open source project more attention.
Exploring CSS Subgrid
We'll explore the upcoming CSS Subgrid, what it does, and what superpowers it will unlock once implemented!
Data Visualization & Supervillains
In this episode we'll learn all about data visualization as Amelia creates a component for our Supervillain PR Agency website!
Vue 3 and the Composition API
One of the biggest new features of Vue 3 is the Composition API. Ben will walk us through how it works and get into more advanced examples.
FLIP Animations with GSAP!
FLIP animations allow us to animate DOM elements in ways that are otherwise impossible! The GSAP FLIP plugin makes these transitions a breeze, and Cassie will teach us how to use it!
Mixing Shaders with GSAP!
Digital Artist Lea is on to show us how to combine the massive power of shaders with the animation ease of GSAP!
Personalization on the Jamstack with Uniform!
Tim will show us how to allow personalization on our Jamstack sites as we build out a site with Nuxt, Prismic, and Netlify!
Creating and Animating 3D CSS!
CSS Master Amit is back to show us how to create 3D CSS, plus how to add motion, rotation, physics, and so much more, all without JavaScript!
Exploring Brand New Nuxt 3!
Just hours after release, we're taking the new Nuxt 3 for a test drive! We're going to find out what's new, what's changed, and learn together!
How to Create a Figma Plugin
We'll learn how to get started with creating our own Figma Plugins, and even learn how to generate SVG with them!
Building a Fancy WebGL Globe with Three.js
In this episode we'll learn how to create a unique, interactive experience to go along with our Supervillain PR Agency theme!
Jamstack, Ecommerce, and Next.js!
Colby is going to teach us how to leverage the benefits of Jamstack websites without compromising on our eCommerce experience!
GSAP Community Questions
Cassie is coming on to help breakdown some cool CodePens, and answer whatever GSAP questions you bring!
Incredible Effects with Three.js
Luis is a master at making gorgeous interactive experiences, and they'll be showing us how to create something special to go with our SpaceBnB theme!
Creating Private Content with Auth0, Next.js, and Prismic!
In this episode we'll build a Next.js website that requires authorization to access some of the content from our CMS.
Using Noise in Generative Art
George Francis is back to dive deeper into generative art! We'll learn some more advanced techniques, building on our knowledge from his last appearance.
Gorgeous Space Shaders
ilithya makes wonderfully fun shaders and 3D creations for the web. She'll join us to build out a space-themed shader!
Building with Astro and Prismic
We'll be building a headless static site using Astro and Prismic as our CMS! Along the way, we'll discuss the mental model of Astro sites, play with Astro's multi-framework support, and show off Astro's new WASM-based compiler.
Animating Input Interactions... in Space!
Ryan LaBar will show us how we can take a basic range slider and make it into an incredible experience. Following the theme of SpaceBnB, it's sure to be out of this world.
Component Driven Development with Bit
In this episode we'll learn how to build React components with Bit so that we can more easily scale our websites and apps!
Build Pages Quicker with Chakra UI
In this episode we'll learn how to use Chakra UI to build pages with robust and customizable components!
Intro to Eleventy
Ben Myers teaches us the basics of Eleventy! We'll learn what Eleventy is and why so many developers are loving the experience.
An Introduction to Shaders
Liam is going to take us into the wonderful world of shaders! We'll learn what they are, how to make our own, and some cool techniques we can apply to our own sites!
React in Eleventy with Slinkity!
Building with React templates in Eleventy is now possible with Slinkity! Creator Ben Holmes comes on to show us how it works and how to build with it.
Using Three.js with GSAP ScrollTrigger
Steve will teach us how to combine Three.js and GSAP ScrollTrigger to create an eye-catching, interactive experience.
Let's Build a Site with Vue 3, Vite, and Prismic!
Lucie will show us how to build a site with Vite, Vue 3, and the new Prismic plugin for Vue 3!
Let's Build a New Tab Chrome Extension!
With just a few files you can create your very own New Tab Chrome Extension! Kilian Valkhof joins us to walk us through the process.
Let's Make Art with Code!
We can use randomized values and some wonderful SVG libraries to create art on the web with Code. Generative master George Francis shows us how!
Let's Make a Design System!
Design Systems make creating and managing websites much simpler. Design Systems Engineer Mike Aparicio teaches us about design systems and creates one with us!
Let's Build a Runner Game with CSS & JavaScript!
Amit Sheen shows us how to create an infinite runner game using HTML, CSS, and JavaScript with no external libraries! Plus we learn some great math and image sprite tricks!
Responsive Typography with Typetura
We learn about Typetura, an awesome way to handle truly responsive typography on the web!
Let's Animate a Character on Scroll!
Tom Miller teaches us some wonderful GreenSock scroll techniques! We learn how to animate Godzilla walking on scroll, along with moving the camera and background as you move across the page.
Demolishing Cities with Canvas Particle Effects!
Zach Saucier teaches us how to use the web Canvas API and his own custom library to make images of cities disintegrate! The cool thing is that this technique can be implemented on any DOM element!
Physics-Based City Destruction with Three.js!
Three.js master Bruno Simon shows us how to create our own 3D City and control Godzilla to destroy it!
Animating SVG to Music with GSAP!
Andrew Rubin shows us how to animate SVG to a beat with GSAP and the Web Audio API. Not only did he code and animate this pen, but he created the illustrations and music for this creation, too!
Building a Food Menu with Container Queries!
Stephanie Eckles teaches us about Container Queries, as well as some great CSS Grid techniques and layout tips!
Let's Build a 3D Cheeseburger Drum Kit!
We'll learn Three.js and GreenSock in this episode where Steve teaches us how to turn a Cheeseburger into a Drumkit! We finish with a playable (mostly edible) drumkit that works with mouse or keyboard.
Let's Build a Physics-Based Burger Builder!
Let's learn some Matter.js from Stephen Shaw! We're going to make a physics-based burger creator, choosing ingredients and getting to throw them around with chain physics!
Sharing Deadly Deals with the Share API!
In this episode, Darin Senneff shows us some wonderful character animation tips with GSAP and SVG! Then we connect it all to the Web Share API to give visitors a fun experience when sharing.
Spinning up a Deal Wheel Component!
Ryan Mulligan will teach us how to create a spinning prize wheel! Using some clever math we're able to spin the wheel and have a character react to the result.
Let's Make a Checkbox Powered Slider!
CSS wizard, Jamie Coulter joins us to build a carousel slider entirely with checkbox logic. No JavaScript needed! We even add some wonderful CSS transitions between each slide.
Let's Make a Voice Powered Image Search!
Did you know there's a voice-to-text web API? In this episode we wire it up to the Unsplash API to allow for voice-powered image search!
Let's Make a 3D Gallery Component!
React Three Fiber allows us to use React components to create 3d experiences. In this episode we'll make a fun ball-pit gallery with throwing physics and changing images!
Building a Generative Team Section
George Francis teaches us how to create randomized faces for our site's team section. We learn some great SVG tricks as we generate random blobs, lines, and lots more!
Creating an Animated Castle Builder
Cassie Evans shows us how to use GSAP timelines along with a range slider to get a customizable castle builder. By using an SVG we can get fun bouncy transitions!
Reinventing the Signup Form
Adam Kuhn showed us his trick for reimagining what we think of as possible with email forms. Plus we learned a technique for turning form borders into more whimsical shapes on submit!