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.

Thinking on ways to solve TOOLTIPS

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

Thinking on ways to solve FABs

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

Thinking on ways to solve BUTTONS

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

Thinking on ways to solve DIALOG

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

Thinking on ways to solve TOASTS

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

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