Learning Materialize CSS

Learn the concepts and important topics to get started with one of the most popular application design systems, Material Design, using Materialize CSS.

Introduction

• Materialize and responsive design

1. Environment Setup

• Materialize CSS overview
• Materialize: Local installation
• Materialize: CDN setup

2. Materialize CSS Colors

• Materialize: Color classes
• Materialize: Color usage

3. Materialize Grid System

• Grid system overview
• Grid system rows and columns
• Challenge: Responsive grid design
• Solution: Responsive grid design

4. Materialize Navbar and Pagination

• Navbars for desktop and mobile design
• Pagination
• Preloaders
• Materialize utilities, or helpers

5. Materialize Media

• Responsive image and video classes
• Shadows and z-depth
• Tables
• Typography and text formatting

6. Materialize Buttons and Badges

• Buttons
• Breadcrumbs
• Badges
• Card classes and usage
• Challenge: Create a layout
• Solution: Review a possible layout using cards

7. Materialize Form and Footer

• Forms
• Footers
• Applying tools to a final project