Web accessibility ensures that every supporter (including those with visual, auditory, motor, or cognitive disabilities) can use a website. So how well do these teams' homepages hold up? I analyzed di...

The default might not be what you expect, and it has a big impact on your styles.

YouTube video by Kevin Powell

My final CodePen demo to celebrate the 2026 FIFA World Cup. This timeline showcases every FIFA World Cup tournament, from the inaugural competition in

This demo uses the experimental timeline-trigger and animation-trigger properties to start CSS animations when the counters enter the viewport. The co

This bracket is 100% CSS, the logic being defined by multiple :has() selectors. Not overly practical but a fun CSS only challenge. Select the team tha

10 Cool CodePen demos from May 2026

This is the simplified demo version of my Football team selector which can be found here: https://codepen.io/editor/cbolson/pen/019ea198-6dfd-70ff-b4b

Learn how to unlock full control of styling select menus on the web. The HTML select element is getting a major upgrade with a new CSS...

My Custom Select demos that explore and push the boundaries of the experimental custom select styling.

This is the simplified demo version of my Football team selector which can be found here: https://codepen.io/editor/cbolson/pen/019ea198-6dfd-70ff-b4b

Fifa 2026 World Cup Team selector. Choose your team and see their starting formation. As you change the selected team, the shirt colors change and the

Yet another clock experiment. This one uses minimal JS, just enough to pass the time values as CSS custom properties. The CSS then uses them to displ

An animation-timeline:scroll based animation to simulate the Artemis Integrity crewship approaching the moon. Note - this is NOT meant to be a realist...

YouTube video by Alvaro Montoro

10 Cool CodePen demos from March 2026