The main point we’re trying to get across is that you simply do not know how users are going to visit your website or web app. You do not know what conditions your website will be visited on and you have little to no control over that. Accept that lack of control and use the limitations to breed creativity and also, laser focus your UX work.

Part 1 and Part 2 of this series explore the browser’s built-in HTML and CSS form validation features and how to progressively enhance the experience by layering JavaScript using the Constraint Validation API. This article extends that exploration by focusing on a form validation use case that is not handled by the browser’s native validation features: a checkbox group.

This tutorial presents via trial and error how to display the proper number of dots on dice faces - using flexbox, :nth-child, :is, :not, and wacky combinations thereof.

The coolest part about this solution is that the scroll() animation only shows a shadow when there’s overflowing content that creates a scrollbar. There’s a slight bonus UX happening too where the shadow gets more prominent the “deeper” you scroll. All with just a few lines of code.

Discover how to improve the user experience of nested menus and tackle a minor yet common issue with them when the user’s pointer leaves the menu item for a moment, and the nested menu goes away, requiring the user to re-hover and try again. A well-known concept called the “safe triangle” solves this problem.