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.

December 23rd: Traffic, Typefaces, and Tutorials

Choose Your Perfect Typeface for Christmas

Grab a typeface for your holiday Pens and virtual Christmas cards from this curated selection by Paulina Hetman.

Get A Free .design Domain Name Today!

.design reflects what you do as a designer. Your name comes with free email hosting, SSL Security, & a Site Builder trial.

HSL Dimmer Switch

jh3y wants you to show you the light with HSL! "Everything is being powered through a --light CSS property. And that means we can also have dimming. Grab the handle and rotate for dimming, tap to switch the light on and off".

#CodePenChallenge: No Preview

The third week of the December #CodePenChallenge is the toughest one to crack! We started you off with an egg-cellent design and it was up to you to recreate it without looking at your preview panel. Check out the valiant efforts from this challenge in our collection.

Traffic Jam

Toggle between the expected traffic and the actual traffic over a period of 12 days in Ile-de-France in this interactive Pen built with React by Gabriele Corti.

Join the 34% of the internet already using WordPress and build your site there, where you won't have to worry about security, spam, upgrading software, and all that technical debt. You can start your blog, build a portfolio, or even open a store!

CodePen's 2019

Team CodePen had a busy year! In this Pen we take a look back at the new features and infrastructure changes we made in 2019 to make CodePen better. Here's to 2020!

Animated Night Hill Illustration - Pure CSS

Aybüke Ceylan translates Yup Nguyen's Dribbble shot to CSS to create a peaceful nighttime scene.

Snowflake Generator

"A snowflake generator, making a unique snowflake every couple of seconds. Code builds a single arm, then generates copies from same data. Just like in nature, they are not quite symmetrical (it's a feature, not a bug)" from Nick Watton.


Florin Pop is on day 96 of his 100 Days, 100 Projects challenge! This fun Pen is #96. Click any dot in the grid to start a wave. And, check out the link in the Pen to learn more about the challenge.

Birthday Input with Zodiac

Aaron Iker adds a bit of astrological flair to a date input field. Enter a birthdate and the field decorates itself with an emoji-style icon representing the zodiac sign for that date.

Bacteria Growth Simulation

Vincent Danna simulates bacteria growth with JavaScript for a contemporary math final project. "Bacteria tend to grow in circular colonies, which in return appear to be like fractals. The bacteria in this simulation are generated using javascript pseudo-random Math.random function."

A CSS-Only Carousel Slider

Sliders in CSS have come a long way! Christian Schaefer demonstrates the potential of CSS Scroll Snap in this Pen. Pop it open in Canary for a glimpse of the auto-forwarding future.

The Basics of CSS - Block Elements Cheatsheet

"The basics of CSS is a series of cheatsheets that help you understand basic concepts of CSS. In this cheatsheet we learn behavior of block elements" from Stas Melnikov.