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. Preset theming values
Experiment with different preset theming values based on our Material Studies apps. You can easily apply these values to your own project and play with further customizations.
Notable Features
These will help you learn and build with Material Design even faster.
Live Prototype
The live mobile prototype (shown on the right) displays sample components to help you better understand your changes.
Material 101
Mobile View
Resources
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.
Components
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.
