Responsive Web Design in Magento 2

Course Overview

In this course, you will learn what responsive web design is and how it is implemented in the built-in themes. You will see which files are used in a responsive site and learn which files you may want to customize for your own changes. You will walk through an example of implementing a custom design feature using the Luma built-in theme.

This is not a course in responsive web design theory, although it will touch on a few key points that you should know when creating a responsive site in Magento 2.0. This course will provide some resources in case you need to learn more.

Learning Objectives

In this course you will:

  • Understand the general principles of responsive web design and which ones to consider when designing a site using Magento 2.0
  • Learn about resources to help you get started if you are new to responsive web design
  • Know how to customize the provided themes or create a custom theme based on the default themes
  • Be able to identify which files you will need to create, edit, or modify to create a responsive site

Target Audience

Front end developers


Managing Your Magento 2 Store or equivalent understanding of Magento features and administration; Core Principles of Theming in Magento 2

This course is based on Magento Community Edition v2.0.0

Course Outline

Overview of Responsive Web Design
  • Key responsive web design concepts
  • Responsive Web Design (RWD) in Magento 2.0
  • Magento UI library and media queries
Using JavaScript in Responsive Web Design
  • Key JavaScripts used in blank and Luma themes
A Closer Look at RWD in the Luma Theme
  • Identify key code
  • View a Luma-based site on different devices/resolutions
  • Show the JavaScript files used in the theme
Customizing a Built-in Theme
  • Identify what the customization will do differently than the default configuration
  • Identify which files need to be created or modified
  • Walk through the files used in a specific customization