Web Technologies and Mobile Platforms

Learning Objectives
At the end of this lesson, learners should be able to:
 Explain the concept of web development and its role in e-commerce.
 Identify the main components of web technologies used to build e-commerce sites.
 Differentiate between front-end and back-end web development.
1. Introduction
In today’s digital economy, almost every successful e-commerce business relies on web technologies to
operate, compete, and grow. Whether customers are browsing products on a laptop, placing orders on a
smartphone, or tracking deliveries through an app, all these experiences are powered by web development
technologies working together behind the scenes.
Web development is the process of building and maintaining websites and web-based applications. In the
context of e-commerce, it enables online stores to display products, manage customer interactions, process
orders, and support secure payments. Without web technologies, modern online retail would not be
possible.

1. Introduction
When you visit an online store, everything you see and interact with—product images, prices, buttons, and
animations—is created using a combination of three core web programming languages: HTML, CSS, and
JavaScript. These languages form the foundation of almost every website and web-based e-commerce
platform in use today.
Although learners are not required to write code in this course, understanding what these languages do—
and how they work together—provides valuable insight into how online stores are built and maintained.
This knowledge enables better communication with developers, more informed platform choices, and a
clearer appreciation of how user-friendly e-commerce experiences are created.

Learning Objectives
At the end of this lesson, learners should be able to:
 Explain what responsive design is and why it matters in e-commerce.
 Describe how screen size, orientation, and device type influence layout.
 Identify techniques used to make websites responsive.
Introduction
Modern e-commerce customers no longer shop from a single device. A customer may discover a product on
a smartphone, compare prices on a tablet, and complete a purchase on a laptop. If an online store does not
adapt smoothly across these devices, users quickly become frustrated and leave.
Responsive web design ensures that websites automatically adjust their layout, content, and navigation to fit
different screen sizes and device types. For e-commerce businesses, responsiveness is not just a design
choice—it is a necessity for usability, accessibility, and sales performance.

Learning Objectives
At the end of this lesson, learners should be able to:
 Identify popular CSS frameworks used for responsive design.
 Explain how frameworks simplify layout development.
 Understand Bootstrap’s grid system and responsive features.
Introduction
Designing a responsive website from scratch can be time-consuming and complex. Every layout adjustment,
spacing rule, and device variation would need to be handled individually. To solve this challenge, web
designers and developers rely on frameworks—pre-built collections of design rules and components that
simplify responsive web development.
For e-commerce platforms, where consistency, speed, and reliability are critical, frameworks help ensure
that online stores look professional and function smoothly across all devices. Instead of reinventing layouts
repeatedly, businesses can use proven frameworks to deliver high-quality shopping experiences more
efficiently.

Learning Objectives
At the end of this lesson, learners should be able to:
 Identify the main mobile operating systems and their market roles.
 Describe how mobile platforms support e-commerce operations.
 Understand the relationship between web apps, native apps, and hybrid apps.
Introduction
Mobile devices have become the primary gateway to the digital marketplace. For many customers, a
smartphone is no longer just a communication tool—it is their shopping mall, payment terminal, and
customer service desk combined. From browsing products during a commute to completing purchases late
at night, mobile platforms now dominate e-commerce activity.
Understanding mobile platforms is essential for anyone involved in online business. Different operating
systems, app types, and distribution channels shape how customers discover, use, and trust e-commerce
applications. This lesson introduces the mobile ecosystem that powers modern online shopping
experiences.

Learning Objectives
At the end of this lesson, learners should be able to:
 Define mobile-first design and explain its importance.
 Recognise design considerations for mobile users.
 Explain how mobile-first design improves conversions and user experience.
Introduction
Mobile devices have become the primary way people access online stores. In many markets, especially in
developing regions, customers may never visit an e-commerce site on a desktop computer at all. This shift in
behaviour has changed how digital platforms are designed.
Mobile-first design is an approach that prioritises the mobile experience before expanding designs to larger
screens. Instead of shrinking a desktop website to fit a phone, designers start with the smallest screen and
build upward. For e-commerce businesses, this approach improves usability, performance, and conversion
rates.

Learning Objectives
At the end of this lesson, learners should be able to:
 Explain what cross-platform compatibility means.
 Identify potential issues affecting compatibility.
 Discuss tools and strategies used to ensure consistent performance.
Introduction
E-commerce customers expect online stores to work smoothly regardless of the device, browser, or
operating system they use. A shopper using a smartphone on a slow network should have the same reliable
experience as someone browsing on a desktop computer with high-speed internet. When websites fail to
perform consistently, users lose trust and abandon the platform.
Cross-platform compatibility ensures that an e-commerce website or application delivers a consistent,
functional, and accessible experience across different devices and environments. For online businesses,
compatibility is essential to reliability, inclusiveness, and long-term customer satisfaction

Learning Objectives
By the end of this lesson, learners should be able to:
 Understand why testing is essential in web development
 Identify common types of web application testing
 Recognise basic debugging approaches used to fix web issues
 Appreciate the role of testing in building trust and reliability in e-commerce

Learning Objectives
By the end of this lesson, learners should be able to:
 Describe key features introduced in HTML5 and CSS3
 Understand how modern web standards improve e-commerce websites
 Identify real-world examples of HTML5 and CSS3 elements in use
Introduction
Modern e-commerce websites look and feel very different from early websites—and that change didn’t
happen by accident. Two key technologies, HTML5 and CSS3, introduced new standards that transformed
how websites are built, displayed, and experienced. In this lesson, learners explore what HTML5 and CSS3
are, the major improvements they introduced, and how these standards enhance interactivity,
responsiveness, and user experience in online stores.

Learning Objectives
By the end of this lesson, learners should be able to:
 Identify major JavaScript frameworks and their roles
 Understand why frameworks are used in modern e-commerce development
 Compare basic differences among React, Angular, and Vue.js
Introduction
As e-commerce websites grow larger and more interactive, managing them with basic web technologies
alone becomes difficult. Modern online stores need fast page updates, smooth user interactions, and the
ability to scale as products, users, and features increase. This is where JavaScript frameworks play a crucial
role.
In this lesson, learners are introduced to the idea of JavaScript frameworks, why they are widely used in
modern web development, and how popular frameworks like React, Angular, and Vue.js support large-scale
e-commerce platforms.