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
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.

January 28th: Toys, Games, and Pets

Radial-gradient

Yuanchuan shares a set of striking patterns created with the css-doodle web component and radial-gradient.

400+ pre-built websites in 1 theme

Get access to the largest gallery of pre-built websites ever created! Join over 300,000 people who chose Be Theme for their design projects. You can’t go wrong with this ThemeForest top 3 bestseller.

#CodePenChallenge: Color Pop

The CodePen community made shocking pink POP in the third week of the Color Palettes challenge! Check out the Pens from the challenge, including Janet Mendez's "Color Pop Cassette".

Interaction of Color, Plate XXIV-1, The Goethe Triangle

"Adapted from Josef Albers' book 'Interaction of Color' -- the Goethe color triangle showing primary, secondary, and tertiary colors. Also, fun with SASS math and functions" from Nora Brown.

Netlify

Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.

CSS LEGO Minifigure Maker

A little bit of #LegoLove from Josh Bader: "Swap heads, change colors, take it apart, and rebuild it!"

WordArt

Katherine Kato went retro and "recreated some WordArt in pure CSS! You can type your own text and the text style changes based on the style you choose".

CodePen Radio #207: Prefill Embeds

Stephen, Marie, and Chris are on to introduce you to the newest feature on CodePen: Prefill embeds.

Focus Styling: Walkthrough

"One of the most significant things you can do to improve the accessibility of your work is to create highly visible focus indicators." Derek Featherstone walks you through accessible focus styling in this interactive tutorial Pen.

Cartoonifying and Animating a Still Photograph

Alvaro Montoro "created an animation of bats flying over people on a bridge using a single element and a still picture" and shares the process in this detailed post with lots of helpful references.

Sabine Robart on CodePen

Isn't a color-coordinated showcase fun? Peruse the pleasingly purple profile of web development student Sabine Robart.

Hexadecimal Hangman

Test your hex color recognition skills in this rather difficult game of hangman "built with React, React Hooks and styled-components" by jh3y.

Dog is Long

"Lengthen this dog as much as you please, but he’ll never be longer than Longcat, the longest cat on the Internet" from Jon Kantner.

CSS Grid Scrabble Board

Hit a triple word score on Bobby Korec's replica of the Scrabble board, built with CSS Grid.