cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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.

November 27th: Checkboxes, Cursors, and Cheese

Maze

You "use your mouse cursor to follow the line from the green mark to the end" to complete levels in this game by Itzik Pop that uses no JavaScript at all!

Snag the hottest new domain name for designers

.design domains were just released and some of the best ones are still available. Normally cost $35 but CodePen subscribers get them now for FREE.

Codevember #12

Mohammed Fahsi on the DPDK team created this surreal Zebra. Make sure to move the camera around and click to change the Zebra and her surroundings.

Ocean

Dolphins live in the... You guessed it.

CSS-only Todo List Checkbox Animation

Shaw twists our brains a little as these checkboxes unfurl into a line to cross out the items.

Cheese

"Click to drop another camera." Then move the camera around (it's a Three.js environment) and keep dropping them. Fun physics in a surreal environment.

Basic JavaScript Event Throttling

Amelia Bellamy-Royds demonstrates some code for throttling and debouncing. It's not too much code, and the idea is to slow down how often you're running code for eager DOM events like `scroll`.

Stretching the Grid — 6 fun ways to use CSS Grid

Andy Barefoot shares six examples of "how you can stretch the Grid implementation a little to make something unusual" in his Medium post.

D3 Table with Template Literals

PJ Trainor continues his series of posts on how to leverage ES6 in D3 with this tutorial on making custom tables.

CodePen Radio #152: A Very Codevember Thanksgiving

Marie and Rachel are back to update us on Codevember - what's inspiring them, how CodePen is picking the best of Codevember, how to keep up even if you can't complete the whole challenge, and why community challenges are a great way to learn something new.

Codevember #25: Avocado!

An avocado expels its pit with a mix of relief and triumph in this deliciously weird Pen by Sebastian DeRossi.

Cursors!

Alex Baldwin hearkens back to the Geocities days with a couple rad animated animal cursors.