Create Websites and Hybrid APPs with Google Material Design

Building a Website and Cordova APP using Google Material Design Lite Framework
3.9 (8 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.
111 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 55
  • Length 3 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 10/2015 English

Course Description

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.

What are the requirements?

  • HTML
  • CSS

What am I going to get from this course?

  • Design Websites using Material Design Lite
  • Design Cordova APPs using Material Design Lite

What is the target audience?

  • Anyone who is a Web Developer
  • Anyone who is a Hybrid App Developer

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: Introduction
Introduction
Preview
01:43
What is Material Design?
Preview
03:05
Difference Between Flat Design & Material Design
Preview
05:57
What Is Material Design Lite?
03:19
Section 2: Project
Setting Up A Project
02:58
Using Material Design Lite
05:09
Section 3: Layout
Adding a Header
03:29
Adding Content
01:15
Adding a Footer
01:22
Section 4: Header
Adding A Title & Rows in A Header
04:07
Adding A Menu Button
03:46
Adding A Menu List
04:43
Adding A Tab Bar In A Header
05:59
Adding A Tab Bar Panels
05:47
Adding A Badge To A Tab Item
04:28
Waterfall Header
03:57
Section 5: Drawer
Adding A Drawer Icon
02:30
Adding a Drawer
03:07
Adding Navigation Links
03:00
Adding Logic To Navigation Links
06:30
Section 6: Footer
Difference Between Mega Footer & Mini Footer
03:10
Adding A Mini Footer Sections
02:07
Adding Copyright & Links
02:22
Adding A Social Button
01:48
Section 7: About Me Page
Adding a Grid
05:49
Adding a Card
02:55
Adding a Card Title
02:44
Adding a Card Image
02:06
Adding a Card Text
02:59
Section 8: Work Page
Adding A Grid
02:53
Adding Cards
01:59
Adding Cards Titles
02:07
Adding Cards Images
02:47
Adding Cards Texts
03:20
Adding Cards Actions
05:52
Section 9: Skills Page
Adding A Grid
02:40
Adding A Data Table
03:08
Section 10: Contact Page
Adding A Grid
02:17
Adding A Name Field
04:08
Adding An Email Field
03:29
Adding A Subject Field
02:53
Adding A Message Field
01:40
Adding A Send Button
03:33
Adding A Tooltip
02:50
Adding A Progress Bar
03:38
Section 11: Survey Page
Adding A Grid
01:55
Adding A Range Input
03:30
Adding A Radio Buttons
05:58
Adding A Checkboxes
04:58
Adding A Raised Button
03:24
Adding A Spinner Bar
04:30
Section 12: End
Final Result
01:32
Adding A Switch Theme Button
05:59
Section 13: Designing Hybrid APPs
Creating A Cordova Application
05:35
Source Code
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

QScutter Tutorials, a place to learn technology

QScutter is a Indian based company that offers an ever growing range of high quality eLearning solutions that teach using studio quality narrated videos backed-up with practical hands-on examples. The emphasis is on teaching real life skills that are essential in today's commercial environment. We provide tutorials for almost all IT topics.

Ready to start learning?
Take This Course