Fundamentals
1. Preparation & Configuration
2.Request Flow
3.Rendering
4.Database & EAV
5.Service Contracts
6. AdminHTML

Theming
1.Basics of Magento
2.Configuration
3.Inheritance
4.Theme Creation
5.File Types
6.Deployment
7.Working with Themes
8. Magento & LESS
9. Magento UI Library
10. Compilation/Processing
11.Layout Basics
12.Layout Files
13.XML File Types
14.Page Layout Declaration
15.Page Configuration
16.Customization Tasks
17.Blocks
18.Templates & Customization
19.Template Security
20. Javascript
30. UI Components & Architecture
31. UI Components Template & Rendering
32.Responsive Web Design

Responsive Web Design
1. RWD Overview
2. RWD in Luma
3. Customizing RWD

RWD Overview

1.These Features Include Magento UI Library,CSS3 Media Query and Java script
2. For RWD We have know some key points

Fluid Grids - Instead of designing in pixels, design in percentages. Use this formula to translation(target/context = result)
Flexible Images - There are multiple ways to proportionally resize an image.The most common one is using CSS's max-width: img{ max-width:100%; }
A media query consists of a media type and at least one expression that limits the style sheets @media only screen and (min-width: 640px){}
Devices such as Android,iPhone and iPad's support this media features.When working with media queries and defined break points considering target based on specific pixels.
Pixels include 320,480,600,768,900,1200

CSS in Responsive Design

styles-l.less is used to generate desktop-specific styles (768px and higher).

styles-m.less is used to generate basic and mobile-specific styles

Javascript in Responsive Design

The following java scripts are used for RWD

responsive.js
menu.js
matchMedia.js used by responsive.js and menu.js

The script files are located in the file system as follows:

├── app/design/frontend/Magento/blank/web/js/
    ├── responsive.js
├── lib/web/
    ├── matchMedia.js
    ├── mage/
     ├── menu.js

responsive.js
To manipulate JavaScript for the desktop or mobile view, responsive.js calls the mediaCheck()anonymous function from matchMedia.js.

The mediaCheck call looks as follows:

 /*...*/
    mediaCheck({
        media: '(min-width: 768px)',
        // Switch to Desktop Version
        entry: function () {
            /* The function that toggles page elements from desktop to mobile mode is called here */
        },
        // Switch to Mobile Version
        exit: function () {
            /* The function that toggles page elements from mobile to desktop mode is called here*/
        }
    }); /*...*/

For example, responsive.js changes the view of the checkout progress block on the checkout page:

For the desktop view, the checkout progress block is permanently displayed on the left-hand side.

For the mobile view, it is moved by CSS to be displayed under the checkout steps. responsive.jsmakes it a toggled block: by default, the checkout progress information is hidden in the Your Checkout Progress section and it is visible after you click it

menu.js

In a mobile view, on the 768px breakpoint, menu.js changes the navigation menu look and behavior the following way:

Category menu items are not displayed, but are accessible after clicking the menu icon.

The behavior of a category link depends on whether the category has sub-categories:If sub-categories exist, the category link behaves as collapsible block. Clicking a category link does not redirect to the category page immediately. Instead it opens a list of sub-categories, including the All category products option.

If there are no sub-categories, the category link behaves as usual.

Re-using Magento scripts in your theme

You can use the menu.js, responsive.js and matchMedia.js to add responsive behavior in your custom theme. If your theme inherits from Blank or Luma, you do not even need to additionally include the script files in your theme.

If your theme does not inherit from Blank or Luma, to be able to use the scripts, you must configure RequireJS for your theme