How does an online shop work?

How does an online shop work?

Building a Web Shop Layer by Layer

This activity explores the layers of the software stack behind a web shop: HTML, CSS, and JavaScript. Working in groups, students build a web shop for a gymnasium by modifying HTML, CSS, and JavaScript through a series of tasks. As they work, they can continuously see how their web shop is developing on their phones and test their ideas at any time.

How does an online shop work?
Students viewing their web shop on mobile in real time

Students start by building the HTML structure of their web shop, modifying and reusing example code. They then consider the target audience and style the shop by modifying example CSS accordingly. Next, they populate a “database” in the form of a product table, before implementing quantity discounts and free shipping thresholds using JavaScript. Finally, there are extension tasks for students who work through the activity ahead of time.

The module addresses the core curriculum area “Programmering” and the competency area “Teknologisk handleevne”. The activity takes approximately 90 minutes.