Learn to make websites with Google's Material Design Lite

A complete guide to Google's Front End Web Framework Material Design Lite.
3.8 (48 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.
967 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 84
  • Length 5.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2015 English

Course 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?

What are the requirements?

  • Basic understanding of HTML and CSS
  • A Text editor

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Start Here
Pre Welcome. An Unusual Start....
02:43
5 questions

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!

Section 2: Welcome
Welcome
08:03
Material Design Spec
Article
Some Examples
05:16
Website Examples
Preview
02:31
What Will Be Covered?
12:10
Section 3: Getting Started
Adding the Required CSS and JS
01:35
A Bit About Color
06:41
Your First MDL Element
Preview
02:32
Material Icons
04:15
BEM Methodology
07:38
CodePen
06:38
Blank MDL Code Pen
Article
Section 4: Components
Material Badges
02:06
Badge Code
07:57
Badge Pitfalls
05:07
Badge CodePen
Article
Material Button Styles
03:51
Code for Flat and Raised Buttons
04:47
Code for Fab and Icon Buttons
06:54
Button CodePen
Article
Material Cards
03:30
Examples of Material Cards
02:29
Code for Card 1
Preview
05:12
Code for Card 2
09:41
Card CodePen
Article
Progress Bars
02:07
Code for Progress Bar
08:47
Progress Bar CodePen
Article
Spinners
01:26
Code for Spinner
03:09
Quirky Spinner
01:29
Spinner CodePen
Article
Material Menus
00:55
Code for Menus
08:26
Menu CodePen
Article
Material Slider
00:47
Code for Slider
03:49
Slider CodePen
Article
Toggle Inputs
Preview
01:45
Checkbox Code
05:13
Code for Radio Buttons
04:19
Code for Toggle Switch
02:24
Toggle Icon Code
03:04
Toggles CodePen
Article
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
Article
Tooltips
01:16
Code for Tooltips
03:29
Tooltips Extras
00:34
ToolTips CodePen
Article
Material Tables
01:50
Code for Tables
09:44
Tables CodePen
Article
Section 5: Layouts
Material Design Layouts
Preview
03:56
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
Article
Section 6: The MDL Responsive Grid
Intro to MDL Responsive Grid
06:15
Responsive Grid Code
10:52
Vertically Aligning Cells
03:59
Responsive Grid CodePen
Article
Section 7: Other MDL Elements
Tabbed Content Sections
Preview
01:28
Code for Tabbed Content Section
09:07
Tabbed Content CodePen
Article
Mini Footer
01:14
Code for Mini Footer
05:28
Mega Footer
02:29
Code for Mega Footer
10:39
Footer CodePens
Article
Section 8: Closing
Disabling Elements on the Page
02:45
Dynamically Creating Elements with JavaScript
06:10
Thank You
03:54
Feedback
02:20

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Adrian Henry, 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.

Ready to start learning?
Take This Course