I keep bookmarking Adam’s GUI Challenges posts/videos and, before I even have a chance to review and link them up, another one is already published! Fortunately, the homepage for them on web.dev is a nice roundup.
For example, a recent one is the split-button component (article / video / demo). It’s one thing to have a design spec, code it up so it works and looks right, and call it a day. But, dare I say that real front-end development is thinking deeper than that. In just this one component Adam looks at:
That’s not everything, but that’s a lot, right? (The article has way more detail, including tools for inspecting what’s going on as it’s being built and small helper libraries that were used.) That’s what real front-end development is. Just “a button with a menu” has a ton of surface area to get right and dangerous implications for getting wrong.
If you like the idea of challenges, CodePen challenges you every week to build something along a prompt with ideas and resources. It’s fun because there are a bunch of people doing it with you, allowing you to see how others approached the same idea differently.