Learning Materialize CSS
1h 7mBeginner2021-11-18
Authors
Ayodele Aransiola
Technical Support Specialist and Software Engineer
Course details
Material Design—the design language developed by Google—took the web development world by storm a few years ago, and Materialize CSS makes it easy to apply that system consistently to your web projects. Once you've chosen Material Design, Materialize CSS is a friendly path to follow, and it allows for a consistent user experience across browsers and devices. In this course, Ayodele Leom covers the key facets you need to know to get up and running with Materialize CSS. He starts with the basics of installation, then covers features like color classes, the grid system, the navbar, buttons and badges, and how to use media with Materialize. If you’re looking to get started with this powerful and time-saving tool to create websites and applications without handcrafting HTML or using a GUI, join Leom in this course.
Skills covered
Materialize CSSCSSWeb StandardsWeb DesignFront-End Web DevelopmentLearningWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Materialize and responsive design
1. Environment Setup
- 02 - Materialize CSS overview
- 03 - Materialize - Local installation
- 04 - Materialize - CDN setup
2. Materialize CSS Colors
- 05 - Materialize - Color classes
- 06 - Materialize - Color usage
3. Materialize Grid System
- 07 - Grid system overview
- 08 - Grid system rows and columns
- 09 - Challenge - Responsive grid design
- 10 - Solution - Responsive grid design
4. Materialize Navbar and Pagination
- 11 - Navbars for desktop and mobile design
- 12 - Pagination
- 13 - Preloaders
- 14 - Materialize utilities, or helpers
5. Materialize Media
- 15 - Responsive image and video classes
- 16 - Shadows and z-depth
- 17 - Tables
- 18 - Typography and text formatting
6. Materialize Buttons and Badges
- 19 - Buttons
- 20 - Breadcrumbs
- 21 - Badges
- 22 - Card classes and usage
- 23 - Challenge - Create a layout
- 24 - Solution - Review a possible layout using cards
7. Materialize Form and Footer
- 25 - Forms
- 26 - Footers
- 27 - Applying tools to a final project
Related courses
- Advanced SQL for Query Tuning and Performance Optimization (2019)
- Advanced SQL for Query Tuning and Performance Optimization
- Using Snowflake with Tableau
- Linux Performance Tuning
- Learning MongoDB
- Microsoft Entra ID for Developers: A Beginner's Guide (2023)
- Introduction to SQLite
- Learning BIM 360 Building Ops