Understanding Learning Curves and Trajectories in CSS Layout

Web development is a learning context with the potential to support rich computational thinking. Large-scale analysis of compilation and runtime errors have been used in introductory programming courses and similar approaches can be used to understand learning in web development environments. We investigated activity logs of a novel web coding game to uncover learning trajectories and what people struggle with when learning flexible box (flexbox), a collection of new CSS layout features. We designed a game called Flexbox Froggy, in which learners solve challenges by writing a few lines of CSS code, moving from simple levels that require knowledge of one flexbox property, to complex levels combining multiple properties. We investigate learning curves based on the changes in syntactic and semantic errors learners make as they complete the game. Our findings show that people performed better encountering a single new property than combined with properties they had already practiced. Clusters of learners at different levels did not demonstrate expected error rates based on learning curve theory. Also unexpectedly, advanced groups that mastered syntax had higher semantic error rates than the beginner group, especially when attempting new properties or complex use cases. We conclude with implications for designing and developing introductory web programming games and other instructional materials.