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.

October 8th: Buses, Bulbs, and Banksy

31 Nights of Horror 2018

"The 31 Nights of Horror series began in 2015 as a way to work on a fun design and coding project while creating a resource for others who are unsure where to turn for good holiday horror" from Daniel Yuschick.

See how people are using your website

Hotjar is a fast and visual way to better understand your users. Get instant visual feedback and improve your user experience. Try it for free.

Restaurant Menu

Katherine Kato shares a scrumptious one-page restaurant menu layout concept, built with flexbox and CSS Grid.

#CodePenChallenge: Ghosts!

The CodePen community really got into the spirit of the Halloween challenge! Check out the Pens from the "ghosts" prompt, including this "Joyful Ghost" from Daniel GutiƩrrez.

HelloSign API: The Most Flexible eSign API

With a robust SDK, amazing support, detailed documentation, and super clean dashboard, HelloSign API is sure to make your team happy.

How to Import a 3D Blender Object into a Three.js Project as a glTF File

Matthew Main shares how he took his Bus Derby game from Blender to Three.js in this in-depth tutorial post. Don't forget to play the game, too!

Flag # Links!

Catch your broken links before you send them to prod with this helpful snippet from Natalya Shelburne.

Mozart

Bertdida translates Dennis Bennett's illustration into CSS for a beautifully composed Pen.

How to Recreate the Banksy Artwork Shredder Using CSS Grid

Lee Martin shows how to recreate the shredder that shook the art world with CSS and Vue in this tutorial post. Add your "favorite" piece to the Pen to give it the Banksy treatment!

CodePen Radio #193: Conferences

Cassidy, Klare, and Marie are on this episode to talk about going to a conference and how to get the most out of it. They also compare conference prep styles.

Code Bulb

A little spark of inspiration from Danie Clawson: "I made this for a project quite a long time ago and felt like giving it its own space."

Tetris

Shadman Kudchikar brings Tetris in the browser with JavaScript as part of a personal challenge to recreate a game every week. Peek back to last week to try out 2048, too!

Variable Fonts and CSS Grid

Mandy Michael continues her tremendous demonstrations of variable fonts with the poem "He Tells Her" by Wendy Cope, set in variables fonts with CSS grid.

[ POP.svg ] Running Pumpkin

Just in time for Halloween season, Steve Gardner animates a pumpkin on the run! This Pen demonstrates Steve's own POP.svg library, check out the Pen description for a link to the library.