Learn to make websites with Google's Material Design Lite
3.7 (68 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,046 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn to make websites with Google's Material Design Lite to your Wishlist.

Add to Wishlist

Learn to make websites with Google's Material Design Lite

A complete guide to Google's Front End Web Framework Material Design Lite.
3.7 (68 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,046 students enrolled
Created by Adrian Henry
Last updated 7/2015
English
Learn Fest Sale
Current price: $10 Original price: $20 Discount: 50% off
3 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 17 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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 is the target audience?
  • 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 84 Lectures Collapse All 84 Lectures 05:24:09
+
Start Here
1 Lecture 02:43
Pre Welcome. An Unusual Start....
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:30
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:11
+
Components
46 Lectures 02:21:12
Material Badges
02:06

Badge Code
07:57

Badge Pitfalls
05:07

Badge CodePen
00:23

Material Button Styles
03:51

Code for Flat and Raised Buttons
04:47

Code for Fab and Icon Buttons
06:54

Button CodePen
00:25

Material Cards
03:30

Examples of Material Cards
02:29


Code for Card 2
09:41

Card CodePen
00:24

Progress Bars
02:07

Code for Progress Bar
08:47

Progress Bar CodePen
00:21

Spinners
01:26

Code for Spinner
03:09

Quirky Spinner
01:29

Spinner CodePen
00:23

Material Menus
00:55

Code for Menus
08:26

Menu CodePen
00:21

Material Slider
00:47

Code for Slider
03:49

Slider CodePen
00:22


Checkbox Code
05:13

Code for Radio Buttons
04:19

Code for Toggle Switch
02:24

Toggle Icon Code
03:04

Toggles CodePen
00:21

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:21

Tooltips
01:16

Code for Tooltips
03:29

Tooltips Extras
00:34

ToolTips CodePen
00:21

Material Tables
01:50

Code for Tables
09:44

Tables CodePen
00:23
+
Layouts
9 Lectures 55:34

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:38
+
The MDL Responsive Grid
4 Lectures 21:28
Intro to MDL Responsive Grid
06:15

Responsive Grid Code
10:52

Vertically Aligning Cells
03:59

Responsive Grid CodePen
00:22
+
Other MDL Elements
8 Lectures 31:15

Code for Tabbed Content Section
09:07

Tabbed Content CodePen
00:23

Mini Footer
01:14

Code for Mini Footer
05:28

Mega Footer
02:29

Code for Mega Footer
10:39

Footer CodePens
00:26
+
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
About the Instructor
Adrian Henry
3.8 Average rating
97 Reviews
1,930 Students
2 Courses
Founder of Hungry Turtle Code. Learning Enthusiast

I am a huge lover of all things code. I have been building websites and desktop applications for years now and my passion for the subject has only grown. I have a degree in Electrical and Electronic Engineering but decided to pursue a life of code instead. Am I crazy? :P

I have many other interests most of which revolve around learning new skills. I love learning about financial markets and forex trading. I am attempting to learn new languages. I play instruments. Learning is my thing.