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

August 27th: Stamps, Sprints, and Splits

New Feature: Pinned Items!

We just launched a new feature to help you keep track of important things on CodePen: pinned items! Now you can click the "pin" at the top of the page on a Pen, Post, or Collection to save the item to your pinned list.

An Event Apart

To design a better web experience, attend a better-designed web conference. An Event Apart is three days of design, code, and content taught by absolute masters—the people who shape our medium. Join us in Washington DC, Chicago, Orlando, or San Francisco… and set yourself Apart.

Pure CSS The Carlton dance

An awesome pixel animation of the Carlton Dance from Grzegorz Witczak. turn the music on for the full experience!

Travel

An elegant travel slider made with flexbox and CSS grid by Katherine Kato.

#CodePenChallenge: Teach JavaScript

In the latest #CodePenChallenge, the community built incredible demos to teach JavaScript concepts, like this Lord of the Rings themed JS quiz by Starskynder. Check out all of week three's Pens in our collection!

Netlify

Here's how quick, powerful, and flexible hosting a site on Netlify can be: 1) Connect your repository (like GitHub, GitLab, Bitbucket) 2) Tell it which branch, which directory, and what build command to run 3) That's it! Netlify will deploy your site live in seconds.

CSS Bird Stamp Collection

Siddharth Hubli translates a Dribbble shot by Mike at Creative Mints into CSS in this gorgeous Pen.

Key Sprinter

Hold a two-person race on one keyboard with Thibaud Goiffon's game! Start player one on the left and player two on the right and see who can get to the finish line first.

CodePen Radio #187: Browser Support

Chris and Marie talk about dropping support for a browser version and how it sucks to let people down. But they also talk about how CodePen handles it, and cover what the browser usage stats are at CodePen.

CSS Animation: Feature Showcase

"We'll use screenshots for this. How about we make an animation instead?" an animated demonstration of a todo item feature from Olivia.

Stylish Image Splitting (Splitting JS)

A showcase of image hover effects created with Splitting.js by strafeOK.

Variable Fonts and Dyslexia

Adrian Roselli explores a potential benefit of variable fonts for people with dyslexia. "These could allow users to control some parts of typefaces that give them the most trouble — bowl size, bowl shape, ascender or descender length, serif size, and so on."

Fragment Shaders Ex.7

A psychedelic "mirror" effect, part of a series of experiments with fragment shaders from Ivan Bogachev.

Poker Animation

Artist Jonny McLaughlin shares an idle animation from an upcoming Sketchy Bones game in this devilishly cool Pen.