When you redesign a gymnasium's online store and can instantly see the changes on your smartphone, web development suddenly becomes tangible. That's what high school students from Aarhus Katedralskole and Rosborg Gymnasium experienced when they tested the CoTinker project's new learning activity "How does an online store work?"

The learning activity from the CoTinker project was tested at the two high schools with a total of 66 students - 54 at Aarhus Katedralskole and 12 at Rosborg Gymnasium. The learning activity introduces students to the layers of the software stack behind online stores through hands-on coding and design work.

Smartphones show changes in real-time

The students worked in groups to redesign a gymnasium's online store using HTML, CSS, and JavaScript on the CoTinker platform. What made the experience particularly engaging was that every time they added something new in HTML or CSS, they could see the changes immediately on their smartphones, which was connected to the CoTinker platform. This instant visual feedback transformed the coding experience from abstract programming to tangible design work.

The students also worked with a simple database resembling an Excel spreadsheet and programmed JavaScript functions that provided free shipping over a certain amount and 10% discount when buying more than four of the same item.

Target Audience Drives Design Decisions

A central part of the learning activity involved extensive considerations about how the online store's appearance should depend on specific user groups. The students had to choose a specific target audience and design accordingly, considering factors like age (students, teachers, or parents), gender preferences in design and color choices, and interests such as sports, music, technology, or fashion.

This focus on target audience led to many discussions about how design decisions impact different user groups and how an online store must appeal to its intended customers to be successful.

Visual Design Engagement

The students became particularly engaged when working with the visual aspects of online store design. The combination of group work and the immediate visual feedback from seeing their code changes on smartphones created an environment where students were highly motivated to experiment and refine their designs.

The hands-on approach meant that students quickly built simple but aesthetically pleasing online stores, making the technical aspects of web development accessible through visual design work.

Programming and Technological Competence

The learning activity covers core curriculum areas of programming and develops students' technological competence. By working with the different layers of an online store's software stack  (from HTML structure and CSS styling to database management and JavaScript functionality),  students gain insight into how complex web applications are built and function.

The CoTinker project is led by Clemens Nylandsted Klokmose, Associate Professor at the Department of Computer Science, with the participation of Line Have Musaeus, Postdoc at the Department of Computer Science, and Thomas Thomsen, Research Assistant at the Department of Computer Science at Aarhus University. The learning activity was developed in collaboration with CAVI.

More info on the CoTinker project.