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.6 (5 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,243 students enrolled
Instructed by Mohammad Tahir Design / Web Design
$19
$35
46% off
Take This Course
  • Lectures 24
  • Length 1.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 8/2015 English

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

What are the requirements?

  • You should already be familiar with HTML & CSS.

What am I going to get from this course?

  • 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.

What 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.

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: Welcome To MDL Lite Mastery Course
MDL Lite Course Introduction
Preview
02:14
02:26

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.


06:55

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
02:06

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.

Section 2: Expolring Different Features of Framework
05:20

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.

06:18
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.

05:05

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>

Section 3: Material icons guide
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/

Section 4: Using Google Fonts
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'>

Section 5: Tables
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.

Section 6: Forms & Buttons
12:20

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.

05:05
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.

Section 7: 10 New videos haev been added about Responsive Grid system
Article

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.

Section 8: The Responsive Grid System
01:27

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.

04:17

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

07:11

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.

Section 9: Create a fully reponsive website from scratch with MDLLite Framework
01:34

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

Final Responsive Website Basic page mark up
04:26
06:44

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.

03:00

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).

04:38

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

00:40

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

05:46

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

Article

Download all files of our final project.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Mohammad Tahir, Front-end Developer

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 also develop Wordpress themes. He uses WordPress starter theme Bones, Underscore and Bootstrap framework to make WordPress Themes fully responsive.

Ready to start learning?
Take This Course