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
Prerequisites
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
