Concept

Users of Material 101 proceed through a set of guided lessons which include code snippets, design guidance and live Material components represented in a phone-like modal which update as one proceeds through each task.


The Material 101 Layout lesson focusing on implementing a masonry-style grid.


A video showing how Material 101 updates according to changes made in Glitch's code editor. The entire tutorial project, which you are also reading from, updates to reflect your changes.

Features

Code snippets and design tips

Code snippets are always paired with design tips and specific instructions about where in your project to place a specific snippet.

Companion prototype & breakpoint

Material 101 has a built in companion breakpoint for use on a mobile device while a user makes changes to their project's code.

System Visalizations & Templates

Each lesson contains a corresponding system visualization that updates as you manipulate variables in your project.

Material 101 includes a range of templates to further reinforce the changes a user makes has a cascading effect across all Material Components.

Template challenges

Template challenges are open-ended design and coding tasks which allow the user to more deeply explore the possibilities with Material Components.