Despite the ease of inspecting HTML and CSS, web developers struggle to identify the code most responsible for particular stylistic effects, due to complex DOM structures and CSS property cascades. Our work explores techniques for generating low-barrier learning materials from webpages with complex HTML and CSS source. We hypothesize that selectively displaying information about an inspected element can help learners reverse-engineer design features more quickly.

• Generalized Visual Regression (Fall 2017 - present): How might we leverage information about visual regression to help learners understand CSS architecture and code structuring logic?
• Semantic Debugging (Winter 2017): We explore early design principles to help users understand complex CSS layout and positioning semantics.
• Visual Regression Pruning (Fall 2016): Perceptual diffs ("pdiffs") generated through image comparison algorithms can help developers catch breaking changes to a UI codebase. We adapt visual regression to a new context: helping developers identify which CSS properties are responsible for stylistic features on a webpage of interest.
• Tutorial Keyword Frequency (Spring 2016): How might we leverage existing articles and tutorials to promote source discovery on complex webpages? Through an iterative design process, we prototype affordances for highlighting relevant CSS properties during inspection. A developer selects an element and provides a brief summary of the feature of interest (e.g. "fullscreen background image"). Our system then highlights properties which appear frequently in web tutorials corresponding to the description provided by the developer.