Practical examples for modern frontend developers.

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

Highlighting Text on Scroll

Highlight text while scrolling through a container.

Building a React Confetti Component

Partying hard with React hooks, CSS and the js-confetti library.

Scroll-Linked Content Reveal Animation

Learn how to create a scroll-linked animation with Framer Motion.

Animated Page Transitions in Next.js

Use Framer Motion to animate route changes in your Next.js project.

Building Dynamic Icons With CSS Animation

Use the power of CSS animations to add joy to your icons.

A Typing Text Effect with React Hooks

Build a hook that backspaces and types out an array of words.

Building a Heatmap Chart Component

Making a heatmap chart like those seen in Github or Google Analytics.