Learn to make websites with Google's Material Design Lite
4.1 (163 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,452 students enrolled

Learn to make websites with Google's Material Design Lite

A complete guide to Google's Front End Web Framework Material Design Lite.
4.1 (163 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,452 students enrolled
Created by Adrian Henry
Last updated 7/2015
English
English [Auto-generated]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • 17 articles
  • 20 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create a beautiful website using elements from Google's Material Design Lite Framework
  • Understand how to navigate some of the pitfalls that developers fall into when creating Material Design Websites
Course content
Expand all 84 lectures 05:24:09
+ Start Here
1 lecture 02:43

This is a quiz that will introduce many of the concepts that will be covered in the course. I do not expect you to do well on this, but give it a go!

Intro Quiz
5 questions
+ Welcome
5 lectures 28:07
Welcome
08:03
Material Design Spec
00:07
Some Examples
05:16
What Will Be Covered?
12:10
+ Getting Started
7 lectures 29:29
Adding the Required CSS and JS
01:35
A Bit About Color
06:41
Material Icons
04:15
BEM Methodology
07:38
CodePen
06:38
Blank MDL Code Pen
00:10
+ Components
46 lectures 02:20:39
Material Badges
02:06
Badge Code
07:57
Badge Pitfalls
05:07
Badge CodePen
00:19
Material Button Styles
03:51
Code for Flat and Raised Buttons
04:47
Code for Fab and Icon Buttons
06:54
Button CodePen
00:21
Material Cards
03:30
Examples of Material Cards
02:29
Code for Card 2
09:41
Card CodePen
00:19
Progress Bars
02:07
Code for Progress Bar
08:47
Progress Bar CodePen
00:19
Spinners
01:26
Code for Spinner
03:09
Quirky Spinner
01:29
Spinner CodePen
00:19
Material Menus
00:55
Code for Menus
08:26
Menu CodePen
00:19
Material Slider
00:47
Code for Slider
03:49
Slider CodePen
00:19
Checkbox Code
05:13
Code for Radio Buttons
04:19
Code for Toggle Switch
02:24
Toggle Icon Code
03:04
Toggles CodePen
00:19
Text Field Intro
02:36
Code for Basic Text Input
02:50
Code for Numerical Input
03:34
Code for Adding a Floating Label
01:40
Code for Multiline Text Input
02:10
Code for Expandable Input
08:08
Textfields CodePen
00:19
Tooltips
01:16
Code for Tooltips
03:29
Tooltips Extras
00:34
ToolTips CodePen
00:19
Material Tables
01:50
Code for Tables
09:44
Tables CodePen
00:19
+ Layouts
9 lectures 55:31
Transparent Layout
10:39
Fixed Drawer Layout
04:51
Fixed Header Layout
06:44
Fixed Header and Drawer Layout
09:19
Scrolling Header Layout
02:47
Tabbed Layout
10:34
Waterfall Layout
06:06
Various CodePen's for all the Layout's
00:35
+ The MDL Responsive Grid
4 lectures 21:24
Intro to MDL Responsive Grid
06:15
Responsive Grid Code
10:52
Vertically Aligning Cells
03:59
Responsive Grid CodePen
00:18
+ Other MDL Elements
8 lectures 31:05
Code for Tabbed Content Section
09:07
Tabbed Content CodePen
00:19
Mini Footer
01:14
Code for Mini Footer
05:28
Mega Footer
02:29
Code for Mega Footer
10:39
Footer CodePens
00:21
+ Closing
4 lectures 15:09
Disabling Elements on the Page
02:45
Dynamically Creating Elements with JavaScript
06:10
Thank You
03:54
Feedback
02:20
Requirements
  • Basic understanding of HTML and CSS
  • A Text editor
Description

Google's Material Design philosophy has been making waves in the design world and has now unified all interfaces used by Google. Including all of their websites and the apps they have available within the Android space.

The opportunity for developers to incorporate this Material Design philosophy into their own arsenal for front end development is now here. Google'e released the official framework for front end implementation of Material Design called Material Design Lite.

This course will take you through all the ins and outs of this framework. Including all Material Elements and Layouts as well as explaining some of the design and semantic coding considerations behind these elements.

If you are interested in responsive material layouts for the websites you build, then you should certainly learn the Material Design Lite framework, and what better time to start than right NOW?

Who this course is for:
  • This course is intended for people who have a basic knowledge of HTML and CSS and are wanting to expand their abilities. Knowledge of any other HTML and CSS framework such as Bootstrap or Foundation is NOT required. This course is great for those interested in Google's Material Design philosophy or just developers wanting to integrate some material design elements into their workflow. This course will also suit beginners looking to improve their skills.
  • You should not take this course if you are not interested in developing sites with the Material Design look and feel. The course strictly focused on how to implement this look and feel into your sites using Google's new framework