Let's Build UI
A collection of 28 posts
Animated Social Share Links
Learn how to build an animation for displaying social links using CSS
Nesting in CSS
A brief intro to the new CSS Nesting module
Building a React Number Ticker
Animate Between Two Numbers with React hooks and CSS
Building a React Confetti Component
Partying hard with React hooks, CSS and the js-confetti library.
Building Dynamic Icons With CSS Animation
Use the power of CSS animations to add joy to your icons.
Building a Heatmap Chart Component
Making a heatmap chart like those seen in Github or Google Analytics.
Adding Click Animations to Anything
Use React hooks and CSS variables to add animation effects.
How to Build a Story Layout
Create an image story layout like those seen in popular apps.
How to Build a Color Palette Component
Building a Segmented Control Component
Use React hooks and CSS variables to create an animated segmented control.
A 3D Hover Effect Using CSS Transforms
How to Build an Image Comparison Slider
Using React hooks to build a before and after image comparison component.
A guide to working with CSS animation and transition events.
Resizable Tables with React and CSS Grid
Learn how to add resizing to your HTML tables.
Creating an Animated Counter Button
A short guide to building an animated counter component with React hooks.
Reducing Motion in Animations
Building a Dark Mode Theme Toggle
Learn how to build an interesting dark mode animation.
How to Build an Expandable Comment Box
Recreating the Medium comment box from scratch using React Hooks.
CSS Text Effects - Five Minimal Examples
Exploring lightweight CSS text clipping and masking effects.
Building a Vertical Carousel Component in React
Learn how to build an infinite carousel using sentences as slides.
Recreating the Medium Applause Button
Learn how to create the Medium applause button in React.
Flexbox Bottom Aligned Elements
We'll cover two ways of bottom aligning an anchor within a flexbox item.
Building a React Card Carousel Component
In this post we will explore creating a card carousel like the one seen on Stripe.com.
Making Progress With Progress Indicators: Part 2
Part two on building progress indicators. This time, using SVG animation.
Making Progress With Progress Indicators: Part 1
The first of a two part series exploring stepped progress indicators.
Page 1 of 2