Create Websites with Google's Material Design (MDL Lite)
3.8 (6 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.
2,266 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Create Websites with Google's Material Design (MDL Lite) to your Wishlist.

Add to Wishlist

Create Websites with Google's Material Design (MDL Lite)

Perfect course to create fast mobile friendly responsive websites using (Material Design) MDL Lite framework by Google.
3.8 (6 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.
2,266 students enrolled
Last updated 10/2015
English
Learn Fest Sale
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build Mobile Friendly Fast Responsive Website With Google Material Design Lite Framework
  • You will Learn basic and advance of MDL Lite framework by Google
  • You will be able to create multicolumn responsive website with MDL Lite Framework
  • You will be able to create modern websites with Material Design introduced by Google.
View Curriculum
Requirements
  • You should already be familiar with HTML & CSS.
Description

You will learn to build fully responsive websites with MDL Lite framework, a modern fast CSS framework by Google. MDL Lite lets you add a Material Design look and feel to your websites. This course offers step by step videos. At the end of this course you will be able to create fast and fully responsive websites.

Your websites will work & look great in modern browsers & old browsers as well. Your final website will work great on Desktops, Tablets, Smart phones and other small and large screen devices.

You can also download source code of final website that you will learn to create with Material Design Lite framework in this video course.

If you want to build modern and fast websites, you should learn MDL Lite framework. This course will make you a better front end developer.

Who is the target audience?
  • This course is for newbies and existing webdesign students who want to learn Responsive Web design and want to learn how to create responsive websites from scratch with CSS Frameworks quickly and easily. Basic knowledge of HTML & CSS is required.
  • Anyone who want to learn how to use CSS frameworks to create responsive and mobilr friendly websites that will work great on Desktop, Tablets & Smartphones.
  • Anyone who wan to build websites with modern design and best practices recommended by Google.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 24 Lectures Collapse All 24 Lectures 01:40:58
+
Welcome To MDL Lite Mastery Course
4 Lectures 13:41

What is Material Design Lite Framework?

Material Design Lite is a new light weight and mobile friendly CSS framework created by Google. It is also known as MDL Lite framework. MDL Lite framework lets you add Material Design look and feel to your website.


Material Design Lite Framework Introduction
02:26

Download and set up Google Material Design Official Website

Getting started with MDL Lite framework is simple and easy, you can download this framework from official website for offline use or you can just add link and Script elements into your HTML pages if you are always connected to internet.

http://www.getmdl.io/started/index.html
Getting Started Download and Setup Google Material Design Framework
06:55

You can also customize and download MDL Lite framework. It is really simple and easy, simply visit Material Design Lite customize page, Choose primary and accent colors choose hosted on Google's CDN or download zipped files.

Choosing a color scheme is very simple and easy, simply click on the color wheel to choose primary and accent colors, you can see live preview of theme.

Preview 02:06
+
Expolring Different Features of Framework
3 Lectures 16:43

The Material Design Lite (MDL) grid component is a simplified method for laying out content for multiple screen sizes. It reduces the usual coding burden required to correctly display blocks of content in a variety of display conditions.

The MDL grid is defined and enclosed by a container element. A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size, each size having predefined margins and gutters. Cells are laid out sequentially in a row, in the order they are defined, with some exceptions:

  • If a cell doesn't fit in the row in one of the screen sizes, it flows into the following line.
  • If a cell has a specified column size equal to or larger than the number of columns for the current screen size, it takes up the entirety of its row.

You can set a maximum grid width, after which the grid stays centered with padding on either side, by setting its max-width CSS property.

Grids are a fairly new and non-standardized feature in most user interfaces, and provide users with a way to view content in an organized manner that might otherwise be difficult to understand or retain. Their design and use is an important factor in the overall user experience.

Preview 05:20

Material design Lite frameworks lets you add Small status descriptors for UI elements


The Material Design Lite (MDL) badge component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.

You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:

  • A "New messages" notification might be followed by a badge containing the number of unread messages.
  • A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart.
  • A "Join the discussion!" button might have an accompanying badge indicating the number of users currently participating in the discussion.

A badge is almost always positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link.

Using MDL Badges
06:18

Copy and Paste Code in Your HTML File MDL Buttons.

<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>



<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>




<!-- Raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised">
Button
</button>



<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>



<!-- Raised disabled button-->
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
Button
</button>




<!-- Colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Button
</button>



<!-- Accent-colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
Button
</button>



<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>





<!-- Flat button -->
<button class="mdl-button mdl-js-button">
Button
</button>



<!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
Button
</button>



<!-- Disabled flat button -->
<button class="mdl-button mdl-js-button" disabled>
Button
</button>




<!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
Button
</button>

<!-- Accent-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--accent">
Button
</button>

How to use Material Design Lite Buttons with Display and Click Effects
05:05
+
Material icons guide
1 Lecture 03:56

An overview of material icons—where to get them and how to integrate them with your projects.
Contents

  • What are material icons
  • Getting icons
  • Icon font for the web
  • Icon images for the web
  • Icons for Android
  • Icons for iOS

https://google.github.io/material-design-icons/

https://www.google.com/design/icons/

How to Material Design icon ?
03:56
+
Using Google Fonts
1 Lecture 03:26
I have used BREE SERIF font for headings and Merriweather for body text.


To use Both fonts add following link in the head section of HTML page

<link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather' rel='stylesheet' type='text/css'>

Preview 03:26
+
Tables
1 Lecture 05:54

HTML Tables are important part of any website that lets you organize your data.

MDL Lite framework offers some necessary CSS classes that you need to add in your HTML tables. MDL tables looks great on all type of devices (Desktop, laptops, tablets and smart phones) and screen sizes (large, small).

The Material Design Lite (MDL) data-table component is an enhanced version of the standard HTML <table>. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.

To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head> section of the page, as described in the MDL Introduction.

How to use MDL Tables
05:54
+
Forms & Buttons
2 Lectures 17:25

HTML forms contain different form elements (input fields, buttons etc). Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.

The Material Design Lite (MDL) text field component is an enhanced version of the standard HTML <input type="text"> and <input type="textarea"> elements. A text field consists of a horizontal line indicating where keyboard input can occur and, typically, text that clearly communicates the intended contents of the text field. The MDL text field component provides various types of text fields, and allows you to add both display and click effects.

Creating beautiful forms are easy, you just need to apply some necessary classes to form elements. In this lecture you will learn to create a practical comment forms with three input fields and a submit button.

MDL Forms TextFields (Input fields)
12:20

The Material Design Lite (MDL) button component is an enhanced version of the standard HTML <button> element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects

.

Material Design Lite offers more than 10 type buttons each with different display and click effect. In this lecture you will learn how to code buttons from scratch.

Using MDL Buttons Component
05:05
+
10 New videos haev been added about Responsive Grid system
1 Lecture 00:05

I have added 10 new lectures. You will learn how to use MDL Lite Responsive grid system and how to create fully responsive websites from scratch with MDL Lite framework.

Preview 00:05
+
The Responsive Grid System
3 Lectures 12:55

The Material Design Lite (MDL) grid component is a simplified method for laying out content for multiple screen sizes. It reduces the usual coding burden required to correctly display blocks of content in a variety of display conditions.

The MDL grid is defined and enclosed by a container element. A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size, each size having predefined margins and gutters.

With MDL Lite Grid system it is very easy to create fully responsive websites for Desktops, Tablets and mobile phones.

Preview 01:27

In this lecture you will learn how to create a simple 2 column layout with MDL Lite grid system.

Using MDL Lite Grid to create multicolumn websites
04:17

MDLLIte grid offers 8 columns grid for tablets and 4 columns for phones. For example you can use
mdl-cell--8-col-tablet class if you need full width column for tablet and mdl-cell--4-col-tablet class if you want 2 equal columns.

MDLLite Grid for tablets and phones
07:11
+
Create a fully reponsive website from scratch with MDLLite Framework
8 Lectures 26:52

See the final fully responsive and mobile friendly website that you will learn to create in this video course.

Preview 01:34

Final Responsive Website Basic page mark up
04:26

In this video we will create mark up for header section of our final website, We will add page title and navigation menu too our site header.

Preview 06:44

Our main navigation menu will be hidden on small screen devices such as Tablets and pones, that's why we will create a sidebar navigation menu that will be visible on all type of small and large screen devices (Desktops, tablets and Phones).

Final Responsive Website Sidebar Navigation for Tablets and Mobiles
03:00

In this lecture you will learn to create 2 columns for primary and sidebar content.

Final Responsive Website Main Section Markup
04:38

How to use Material design icons and MDL Lite forms search fields.

Using Icons and Search fields for sidebar and Primary section
00:40

Our final responsive website will have 3 columns footer section, in this lecture you will learn how to create 3 columns footer layout and also add background color with single CSS class

Preview 05:46

Download all files of our final project.

Download Final Project Files
00:04
About the Instructor
Mohammad Tahir Taous
3.7 Average rating
22 Reviews
4,282 Students
3 Courses
Contributing writer at SitePoint, DeveloperDrive & Pagely.

Mohammed Tahir is a blogger, writer and front end developer from Karachi, Pakistan.

He has been learning and teaching about HTML, CSS, Front end development Frameworks like Bootstrap, Foundation ZURB, WordPress, Theme Development and other web design related topics for 5 years..

He published video courses and articles about HTML, CSS, WordPress, Theme Development, front end development Frameworks like Twitter Bootstrap, Foundation and others topics.

He has been featured on some of the most popular blogs including SitePoint, CreativeBloq, Pagely, InstantShift, DeveloperDrive and many others.

He has been writing articles and tutorials for many popular websites for almost 3 years.