Typical user story. The user browses a catalog of UIs and picks one that interests them. They are then taken to a screen that shows a break-down of what subcomponents the chosen UI is comprised of. If we visualise this break-down as a tree of components, the user starts at the leaf nodes and eventually develops the techniques necessary to implement the chosen UI as a whole i.e. once they reach the "root node."
Technical challenges. Each UI on the website needs to have screenshots for all its components, its component's components, its component's component's components... and so on. To automate this process I set a "data-" attribute on every component I want a screenshot for, and run a custom TestCafe script to take PNG screenshots of every component across various screen sizes. Once the user starts learning how to code a particular component, they are shown a simple text editor (based on the Monaco editor) as well as a preview panel. The preview panel shows a realtime preview of their code implementation. Once they are happy with their implementation, they can evaluate their work by running a visual regression operation (based on pixelmatch) that compares actual and expected screenshots.
Benefits of this approach. There is a lot of value in presenting learning material in bite-sized chunks. It makes learning less intimidating, it's easier to stay motivated and there is less friction to actually start coding if the goal is small and won't take long. Furthermore, the web is saturated with videos and articles for learning web development which lends itself to a lot of passive learning. Coding is a practical discipline, and this project has a large emphasis on being hands-on.