Building Beautiful Sites Faster with Material Components for the Web
Developed by a core team of engineers and UX designers at Google, Material Components (MDC) helps developers execute Material Design. MDC has over 20 beautiful and functional UI components for the web platform and is also available for Android and iOS.
This codelab will show you some situations where Material Components for the web (MDC Web) can make your app more functional and beautiful, while saving you engineering time.
What you will build
In this codelab, you’re going to complete Shrine, an e-commerce app that sells clothing and home goods. Your app will:
- Use a fixed header bar - called a toolbar in MDC Web - to display a title using Material Design’s typography guidelines and a navigation icon complete with a Material Design ink ripple effect.
- Contain a side navigation drawer displaying a Material Design list of different product categories.
- Display a list of product cards using layout grid , providing a beautiful experience regardless of form factor.
Components you’ll be using
- Layout Grid
Code blocks are for you to simply copy and paste.