favorite Building with Material

These interactive lessons will teach you how to design and build digital products with Material Design. You'll walk through the basics of using layout, color, typography, and shape, using code to customize your design along the way. This project is made with Material Components for the web, but its concepts and techniques can be used across platforms and products.

Get Started

Click the button below to remix this project and start coding. Then click on ‘Show’ and ‘In a New Window’ to run your project in a new tab.

What you can expect

Material 101 covers four important aspects of Material Design: layout, color, typography, and shape. For each of these topics, you'll get an overview of core concepts, complete an activity, and play with preset values for customizing components.

1. An overview

Read about a topic's three key concepts and learn from a visualization illustrating those ideas.

2. An activity

Follow the instructions to customize your project, working with real code in the Glitch code editor. You can even copy and paste code snippets to quickly see how they impact the look and behavior of Material Components.

3. Material Template Challenges

Take what you learn even further by learning advanced techniques in customizing Material Components for the Web in a set of Material Templates provided in the project.

Notable Features

These will help you learn and build with Material Design even faster.

Mobile View

See your work in the context of a small screen by navigating to your project's URL on your phone or mobile device.

menu Material 101

Material 101

Mobile View


Theming app templates, located in the navigation drawer, provide a larger context for your work. You'll use them to see how your design choices affect different types of applications, such as a login screen or online portfolio.


The components page displays an overview of every Material Component available on the web. Located in the navigation drawer, it provides quick access to the design for each component.