GUI Challenges

There is no one way to solve interfaces challenges.
In this series, we'll be challenging ourselves and each other
to find multiple ways to solve interface challenges
and expand the diversity of our skills.

RSS Feed

Thinking on ways to solve TOOLTIPS

In today's GUI Challenge, @Adam Argyle builds a tooltip with a custom element (no web component!), :has(), transforms, and logical proper...

Thinking on ways to solve FABs

In today's GUI Challenge, @Adam Argyle builds a couple of floating action buttons (FABs) and talks about the UX and CSS considerations fo...

Thinking on ways to solve BUTTONS

In today's GUI Challenge, @Adam Argyle styles all the web's different button types with custom properties and :where(), for light/dark a...

Thinking on ways to solve DIALOG

In today's GUI Challenge, @Adam Argyle shows how to visually enhance the dialog element while maintaining great accessible and internatio...

Thinking on ways to solve TOASTS

In today's GUI Challenge, @Adam Argyle shares thinking on a way to build toasts, a non-interactive and passive component for UI to provid...

Thinking on ways to solve SWITCHES

In today's GUI challenge I share my thinking on a way to solve a switch. A tiny, UX packed component that ended up being one of the most ...

Thinking on ways to solve SETTINGS

In today’s GUI challenge, we build and demo a dynamic settings page with sliders and checkboxes. Our settings page is responsive, support...

Thinking on ways to solve TABS

In today’s GUI challenge, we’re building a tabs component with some really cool features that you may not have thought about. Our tabs co...

Submission shoutouts for SIDENAV

We asked the community to build a sidenav component your way and you all delivered! Check out the submissions:
@a_nurella → http://goo.gl...

Submission shoutout for CENTERING

We stress tested 5 different CSS centering techniques and I challenged you to submit your own. Shout out to Chris Coyier from CSS-Tricks ...

See more Shows
subscribe