mastodon
4.5.9
Build, test, and discover front-end code 💻
The April CodePen Challenge continues!
This week's code word is: Loop 🔁
https://codepen.io/challenges/2026/april/2
Thanks @MongoDB for sponsoring: https://srv.buysellads.com/ads/long/x/THHFSIZQTTTTTT6JEG4CLTTTTTTKAUNC26TTTTTTWDCABBVTTTTTTI4MVJAULS7U53AIPSLFV7I6NKL5ZHRHTMIEPH2T?cid=371477
The April CodePen Challenge is on!
This month we're working with Code Words
https://codepen.io/challenges/2026/april/1
Thanks @MongoDB for sponsoring: https://srv.buysellads.com/ads/long/x/THHFSIZQTTTTTT6JEG4CLTTTTTTKAUNC26TTTTTTWDCABBVTTTTTTI4MVJAULS7U53AIPSLFV7I6NKL5ZHRHTMIEPH2T?cid=371477
In CodePen 2.0, there aren't separate URLs for Full Page View, Details View, Presentation View, etc. Those are all just query params now, and the trick is just to get the screen how you like it and click "Copy Link with Layout".
"Jelly text (Variable Font Physics)" by mike-at-redspace
https://codepen.io/mike-at-redspace/pen/JoRPvpy
(Feels like you could recreate some of the great design at https://follow.art/ with variable fonts!)
CodePen now has a Lightning CSS Block. It's a "syntax lowerer" (like Babel is for JS, but for CSS). It respects your browserslist! It's a bundler! It's a minifier!
It's the final week of the March CodePen Challenge!
This week, we're working with Opposite Directions ⬆️⬇️
https://codepen.io/challenges/2026/march/4
You can take any 2.0 Pen:
https://codepen.io/editor/team/CodePenTemplates/pen/019cfcb5-ae0e-7b17-8d29-744d29b46458
And deploy it:
https://tight-hill-cattle.codepen.app/
Then map it to a subdomain*:
https://subscribe.shoptalkshow.com/
Three-minute video on how here, and docs:
https://blog.codepen.io/docs/pens/deployment/
* apex domains coming soon.
Our Front-End Opposites challenge continues!
This week, we're working with True & False
https://codepen.io/challenges/2026/march/3
The March CodePen Challenge continues!
This month is all about front-end opposites.
This week, our opposites are Min & Max
https://codepen.io/challenges/2026/march/2
The March CodePen Challenge is on!
This month, we're working with front-end opposites
https://codepen.io/challenges/2026/march/1
AIM (Anchor Interpolated Morph) is a pretty cool idea from Adam.
https://argyle.ink/anchor-interpolated-morphing
Here I'm using it for a [popover]-powered image gallery where the thumbnails open full-size images. They animate from where they were, and close back to where the were as well.
It's the final week of the February CodePen Challenge!
Let's play with new colors 🎨
https://codepen.io/challenges/2026/february/4
Out with :nth-child(), in with :sibling-index()! Just so satisfying to use.
* no Firefox yet
The February CodePen Challenge continues!
This week, we're mixing and blending colors 🎨
https://codepen.io/challenges/2026/february/3
