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

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.

July 3rd: Fireworks, Vacations, and Heat

Conway's Fireworks

Ben Matthews celebrates the Fourth of July holiday with fireworks built with Conway's Game of Life algorithm. Check out the comment thread on the Pen for a link to his blog post about how he made it.

66 "snack sized" videos covering everything about ES6

The JavaScript world has fully embraced ES6, and there is a lot to love about it. It's time to make sure you're leveled up in all the new syntax and possibilities. Pick up Wes Bos' course and you'll be all set. Oh, and remember you can practice your ES6 stuff right in CodePen!

1950's Astronomy Chart in CSS Grid

CSS Grid experiment of a page from a vintage astronomy encyclopedia, by Kristopher Van Sant.

Solitaire

Hunor Marton Borbely's fully playable solitaire game isbuilt with "React, Redux and HTML5's drag & drop feature". There are lots of great details on how it was made in the description of this Pen!

CodePen Radio #136: Drew Conley

Drew Conley created an RPG right inside CodePen! On this week's episode of CodePen Radio, he talks to Marie and Tim Holman about how he built it.

New Zealand Visual Itinerary

Ren Aysha's lovely animated Pen is "a visual itinerary of my trip to Middle Earth". Click the points on the timeline to zoom to their locations on the map.

Methods for Equal Height Columns

Craig Fox's post takes you through various methods of creating columns of content of equal height, with the pros and cons of each.

Abeatrize - Profile

It's always fun to find a new CodePen member making cool things! Beatrize's work first caught our eye with her Snorlax/Totoro/Baymax mashup, and she's been making fun stuff ever since!

Paint on Heat Distortion

"Paint on a heat distortion effect. Uses GSAP to animate SVG, canvas for the paint tool, and CSS Masks to marry them." by Matt Popovich.

Creative Coding Club - Canada Day!

The Creative Coding Club's celebrates Canada's 150th Anniversary with an animation challenge and the results are fantastic!

Michael Mangialardi - Portfolio Project

The founder of the #DailyCSSImages challenge built his portfolio/resume website as a CodePen Project!

Particles

"A small collection of experiments with particles" from Marco Dell'Anna.