
Aspiring programmers have written millions of lines of code using online tutorial platforms such as Codeacademy, but none of this code will ever be used. TagStyle is a web application that seeks to make learning more productive. Clients submit a mockup for a new website they want to build, and learners style the website by decomposing the mockup and writing CSS. By turning real-world development needs into learning exercises, TagStyle helps students contribute meaningful code while learning industry-specific development skills.

Figure 1: Tagging interface, a collaborative workspace for users to break down a mockup

Figure 2: Styling interface, a live CSS editor allowing users to style the elements they've identified