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.

April 16th: Dancing, Design, and Donkey Kong

CodePenChallenge: Donkey Kong Roundup - CodePen Blog

The CodePen community went bananas with the Donkey Kong challenge! Check out a few of our favorite Pens from this week.

Attend our Free JavaScript Workshop

Hack Reactor is a full or part-time coding school to help advance your career. Get a taste of code school and boost your knowledge of functions and scope.

Dancing Markovs: Play it yourself edition

Train your own piano-playing Markov chain, or listen to Erik Satie's Gymnopedies played automatically in Tero Parviainen's Pen.

Variable Font Demos

Ready to dig into variable fonts? This collection of small demo samples of variable font capabilities from Jason Pamental is a great place to start.

Owlypixel's Guitar Escape

Owlypixel's Project is a "journey to a land of old memories, constantly hurting fingers, jolly improvisation, strict discipline and remarkable power of music".

#169: Dev Environments - CodePen Blog

If you've ever wondered which code editor or typeface the folks behind CodePen use, this is the episode for you! Marie interviews the CodePen team about their preferences for coding, typeface, music, and their take on tabs vs. spaces.

Accessible American Chopper Meme

Adrian Roselli takes the meme of the moment and makes it accessible in this Pen that includes full descriptions of each frame and accessible captions.

Everything IT requires and Developers Love

HelloSign API makes your build vs. buy decision a no brainer. With our in-depth documentation, customizable features, and a dashboard that makes your code easy to debug, you won't find an eSign product with an easier path to implementation. Try it free!

CSS / SVG Blobby Background

Colorful blobs bounce and float through a hallway in Cassie Evans' experiment with SVG filters and masks and CSS animation.

Multidirectional Email Carousel

Gary Wesolowski demonstrates a "carousel type build that scrolls over large background image using directional arrows" for email!

Editorial Design and CSS Grid: Inspiration and Examples

Ricardo Prieto lays out pages from 99U Quarterly Magazine with CSS Grid in this tutorial post.

CSS Cheerful Pineapple

Liz Wendling shares a CSS pineapple jumping for joy, based on a Dribbble shot by RemovT.