Create Websites and Hybrid APPs with Google Material Design

Building a Website and Cordova APP using Google Material Design Lite Framework

3.45 (23 reviews)
Udemy
platform
English
language
Web Development
category
QScutter Tutorials
instructor
Create Websites and Hybrid APPs with Google Material Design
198
students
3 hours
content
Oct 2015
last update
$34.99
regular price

What you will learn

Design Websites using Material Design Lite

Design Cordova APPs using Material Design Lite

Why take this course?

Material Design is a design language introduced by Google to unify user experience across all their products on any platform. Material Design is one of those many other types of designing languages like Flat Design, Metro Design, Realism Design etc. Material Design does differ to other types in terms of colors, typography, shapes, patterns and layout. But Material Design adds something very new to design language i.e, Motion and Stacking.

Google encourages developers to use Material Design to design their websites and apps because it let's you create a visual language that synthesizes classic principles of good design with the innovation.

In this course you will learn to design websites and hybrid apps using Material Design from scratch. We will create a portfolio site with multiple pages. Then we will learn designing hybrid apps using Material design by deploying the same site on Cordova container. Let's get started.

Content

Introduction

Introduction
What is Material Design?
Difference Between Flat Design & Material Design
What Is Material Design Lite?

Project

Setting Up A Project
Using Material Design Lite

Layout

Adding a Header
Adding Content
Adding a Footer

Header

Adding A Title & Rows in A Header
Adding A Menu Button
Adding A Menu List
Adding A Tab Bar In A Header
Adding A Tab Bar Panels
Adding A Badge To A Tab Item
Waterfall Header

Drawer

Adding A Drawer Icon
Adding a Drawer
Adding Navigation Links
Adding Logic To Navigation Links

Footer

Difference Between Mega Footer & Mini Footer
Adding A Mini Footer Sections
Adding Copyright & Links
Adding A Social Button

About Me Page

Adding a Grid
Adding a Card
Adding a Card Title
Adding a Card Image
Adding a Card Text

Work Page

Adding A Grid
Adding Cards
Adding Cards Titles
Adding Cards Images
Adding Cards Texts
Adding Cards Actions

Skills Page

Adding A Grid
Adding A Data Table

Contact Page

Adding A Grid
Adding A Name Field
Adding An Email Field
Adding A Subject Field
Adding A Message Field
Adding A Send Button
Adding A Tooltip
Adding A Progress Bar

Survey Page

Adding A Grid
Adding A Range Input
Adding A Radio Buttons
Adding A Checkboxes
Adding A Raised Button
Adding A Spinner Bar

End

Final Result
Adding A Switch Theme Button

Designing Hybrid APPs

Creating A Cordova Application
Source Code

Reviews

Kimberly
September 20, 2022
When javascript entered the picture, I became confused. There's nowhere to download the .js file that the instructor created. I went to the end of the course to download the source files and it would not give me access to the google drive. Very disappointed, I am not sure I can continue since the javascript is essential to the navigation. I will try to get a magnifying glass to see the code on the screen and re-type it in my .js file. :(
Mark
February 3, 2018
With this course, you will walk through building a fairly decent website. You'll leave with a pretty good understanding of the topic. I could see what the instructor was doing and got a better understanding by following along with the website: websitehttps://getmdl.io/components/index.html Full source code for the project is provided at the bottom of the course.
Pieter
April 12, 2016
Much repetition. Does not explain the Google material design principles. Instead, just mentioning class name usage, without explanation how those classes interact. I would like to know, why class names are grouped by '--' dash dash and '__' underscores. So I can guess / predict class names. I like references to external sites for more details. Where can I read more info on 'mdl-card' for example. Or MDL, etc. I was triggered to this course of the Cordova aspect, which was very basic. I try to follow the steps to use Cordova, but it failed because I didn't have Android SDK. The course has potential, but need to grow.
Bennett
March 6, 2016
The tutorial was good! Some of the code did not quite work out when I was following it but, since there was a download of the full site at the end of the tutorial, I was able to debug and get it working.
Amy
February 12, 2016
It is a basic MDL course. Before taking this class, have a little knowledge of JavaScript and CSS. Then, it will help you to complete the course. Overall, it is a good class.

Charts

Price

Create Websites and Hybrid APPs with Google Material Design - Price chart

Rating

Create Websites and Hybrid APPs with Google Material Design - Ratings chart

Enrollment distribution

Create Websites and Hybrid APPs with Google Material Design - Distribution chart

Related Topics

Google Ads (Adwords)
User Experience Design
Material Design
404386
udemy ID
1/26/2015
course created date
11/22/2019
course indexed date
Bot
course submited by