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