The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

This week: Sleeping, Swimming, and Squishing

Single Div CSS "Six"

Lynn Fisher celebrates 6 years of her Single Div project with a spectacular SIX. Check out the Pen description for a link to the full project.

Make Git 10x faster with GitKraken

Download GitKraken Git GUI free on Windows, Mac & Linux! Integrate with GitHub, GitLab, Azure DevOps & Bitbucket for a streamlined workflow.

Emojis as Mask Images

Emoji have many uses! Yuanchuan uses them here as SVG masks with css-doodle, Check out the subtle animation on the umbrella.

Suzanne Makes 100 Things In CSS

Suzanne Aitchison is participating in 100 Days Project Scotland 2020 with CSS illustrations. "Lots of project participants will be crafting, sewing, drawing... but I'm out to show programming can be art too yo".

You Should Probably Learn React

It's extremely popular for a reason: React is a good fit for the fast, interactive, state-driven websites we're often asked to build as front-end developers. CodePen recommends this course by Wes Bos to upgrade your JavaScript skills.

CAPTCHA Ideas

"Text and image CAPTCHAs are boring. Here are more interesting options". Olivia Ng shares a set of playful puzzles that are a lot more fun than your average captcha.

Sleepy Sloth

Louis Hoebregts animates a napping sloth without disturbing their rest. Hover over the sloth to check out the unique movement.

Ghost at the Disco

You know it's a party when the ghost shows up! Anna the Scavenger's Three.js scene is haunted by a shimmering spectre.

#CodePenChallenge: Viewing with Vue

For week three of the May challenge, we created image galleries with Vue. Check out the Pens from the challenge, including Hai Le's Polaroid-inspired gallery.

Pure CSS Lite Brite, but with CSS Counters

Rock Starwind recreates the interactive fun of a vintage Lite Brite toy with CSS! "This pen was initially designed with the intent to track how many total pegs were plugged into the board. But because of the discussion in the background that inspired it, it quickly became an ambitious project to demonstrate the power of CSS Counters and what CSS alone (or at least this modern iteration of it) can be capable of."

CodePen Radio #269: Docs and Blocks

Chris and Marie talk about updating the documentation at CodePen to support WordPress’ block editor – also known as Project Gutenberg.

Range Sliders With a Rolling Counter

Jon Kantner gives the counters on these range sliders a satisfying rolling effect as the numbers change.

Water

Cool off for a moment with Kasper De Bruyne's inviting pool scene.

Button Squish Animation

Aaron Iker's unassuming buttons have a pleasantly bouncy "squish" effect when you click on them.