css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
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 23rd: Creepers, Customizations, and Chrome Extensions

#CodePenChallenge: Paperboy Roundup

The CodePen community really delivered this week! Here are just a few of our favorites from this week's Paperboy challenge.

Using pseudo-elements with CSS Grid

Michelle Barker demonstrates a "prime case for using pseudo-elements (::before or ::after) as child items of the grid".

Animating a 3D Creeper's head in CSS and JS

Yann Prono shows how he created a Minecraft-style Creeper head with CSS and JavaScript in this post on dev.to.

From Pen to Chrome Extension - CodePen Blog

Nour Soud shares how she took her Password Genie from CodePen concept to working Chrome extension!

The Last War

A" simple html game with factories that randomly colonize the world. You need to contrast them by planting trees on every square" from lucagez

Audience spotlight reveal w/ CSS variables

Turn the spotlight on the crowd with this " audience spotlight reveal using CSS variables to update the spotlight position" from jh3y.

Jonny McLaughlin on CodePen

Cats, cobras, and a creepy dummy populate the striking profile page of frontend dev & illustrator Jonny McLaughlin.

#170: Christina Gorton - CodePen Blog

Marie talks with Christina Gorton about how she uses CodePen to learn as well as teach code.

Bauhaus Weimar

Navelpluisje recreates a Bauhaus poster with CSS grid in this striking Pen.

The Portal API

J Scott Smith demonstrates React's Portal API, "useful to escape inherited styles of parent DOM nodes" in this tutorial post with helpful embedded demos.

Everything IT requires and Developers Love

No API can write your code for you, but ours comes close. With our in-depth documentation, customizable features, and dashboard that makes your code easy to debug, you won't find an eSign product with an easier path to implementation. Try it free!

Learn Redux

A short 20 video / 2.5 hour course intended as a next steps for someone already comfortable with React. This is a start-to-finish course that will teach you React.js, Redux and React Router.

CSS Dash Loader

Cassidy Williams created a loading animation based a very cool Dribbble shot.

VHS Effects

Halvves plays around with a regl fragment shader inspired by an example on Shadertoy. Check his profile too, it has a very cool custom design.