Angular Material 2 Design For Programmers and CSS Newbies
3.8 (16 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.
70 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular Material 2 Design For Programmers and CSS Newbies to your Wishlist.

Add to Wishlist

Angular Material 2 Design For Programmers and CSS Newbies

Learn step by step to build stunning user experience for your application using Angular Material Design 2
3.8 (16 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.
70 students enrolled
Last updated 4/2017
English
Current price: $10 Original price: $45 Discount: 78% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a layout with all the Angular's material design components with stunning user experience
  • This is neither a Photoshop nor a CSS course, but a course to learn how to design impressive UI components for business applications
  • After the course, students will be ready to design UI components using Angular Material Design 2 (Angular 4 & above)
View Curriculum
Requirements
  • HTML (must)
  • CSS basics (must)
  • TypeScript 2 (Good to know basics of components and modules - If you are confident of your programming skills, you may skip)
Description

User experience can be a game changer! A million dollar product could go to trash if it fails to grab eyeballs given the miniscule amount of time a user spends to make that decision. So, it is extremely important to take UX seriously. Further, it is one of the most interesting areas to explore. Treat to eyes! :) UX can make a dull evening look colourful!

This course is for CSS newbies curious to learn about Angular's (Version 4 and above) material 2 design and programmers willing to taste UX design for their products. Please note that this is neither a Photoshop nor a web design course but a course to walkthrough in a simple and clean way to introduce you to all the Angular's material design components and prebuilt theme to teach you their applications.That said, I have heard the usual cliche from students,

'I know UX designing is exciting but it's not for someone like me who never had that world class imagination!". 

Well, that's not absolutely true. 

UX designers do need that kind of perception or expertise in tools like photoshop, but many a time, you can start learning with business applications where you don't make colourful catalogues, but develop UI components to handle business process. This is absolutely a good place to start. In fact, all the business critical applications you see in the market today need this kind of experts! You can become one!

Who is the target audience?
  • Newbies with basic HTML, CSS and TypeScript knowledge willing to learn angular material 2 design
  • Application Programmers with basic CSS knowledge, new to UX design curious to learn Angular's Material Design
Students Who Viewed This Course Also Viewed
Curriculum For This Course
+
Introduction
2 Lectures 02:39

This is an introduction to the Angular Material 2 Design course. We will see the complete curriculum and what would be road ahead. 

Preview 01:01

Angular Material 2 Design Project Source Code attached

Introducing Angular's Material Design and Software requirements
01:38
+
First Angular App
2 Lectures 06:29

In this lecture, we will see how to create a basic angular app, with angular CLI (command line interface)

Preview 01:47

In this lecture, we will see how to add material design 2  package and its dependencies like BrowserAnimations module and hammerjs using npm. We will also see how to import pre build themes in angular material design 2, such as deeppurple-amber, indigo-pink, pink-bluegrey and purple-green

Installing Angular Material and Themes
04:42
+
Navigation
4 Lectures 17:29

In this lecture, we will walkthrough the basic angular app created using angular CLI. Further, from the angular material 2 component library, we will discuss about the Navigation controls, such as Side Navigation component (MdSidenavModule) and toolbar component (MdToolbarModule).

Preview 05:54

In this lecture, we will discuss about the material icons (MdIconModule), and add some CSS styling to it.

Preview 02:08

In this lecture, we will discuss how to include a menu button and add menu items (MdMenuModule) to it. We will also discuss about adding material icons  to the menu items.

Menus
04:03

In this lecture, we will discuss about Tabs component (MdTabsModule) and see how angular EventEmitter works to help trigger an event from child component and handle it in the parent component. We will learn this by separating out our toolbar code to a new angular component.

Tabs
05:24
+
Form Components
2 Lectures 10:02

In this lecture, we will discuss one of the most important controls from the angular component library, Form control! We will discuss how to implement components like Input box (MdInputModule), radio buttons (MdRadioModule), checkboxes (MdCheckboxModule). In addition to that we will discuss how to use cards (MdCardModule) to give that wow effect in UX. While learning these, we will see how to debug angular code using Chrome browser dev tool. 

Form Components - Part I
07:14

In this lecture, we will continue to learn more form components like select box (MdSelectModule), and raised button (MdButtonModule). We will see how to pass values from an angular component (Written in typescript), to the HTML page.

Form Components - Part II
02:48
+
Tiles, Dialog, Snackbar
3 Lectures 12:13

In this lecture, we will discuss about Tiles (MdGridListModule) or the so called GridList. We will take a look at how to display variety of tiles, differentiated by colours which can span across multiple rows (rowspan) and columns (colspan) to give that wow effect in UX

Tiles
03:41

In this lecture, we will discuss how to implement the dialog boxes (MdDialogModule) with the help of angular material components like MdDialog and MdDialogRef. We will see how to pass values from the dialog to parent component

Dialog
06:46

In this lecture, we will discuss about adding snack bars (MdSnackBarModule)

Snackbar
01:46
+
Appendix
1 Lecture 00:58

In this lecture, we will play around with the side navigation component's modes like, side, over and push

SideNav Modes
00:58
About the Instructor
Karthikeyan Alagarswamy (Karthi)
3.6 Average rating
46 Reviews
220 Students
2 Courses
Software Architect, Udemy Instructor

I started programming when I was 10 and at 12, I developed my first website. Since then, software development has become a part of my life and it had also decided my career. I have been developing softwares for years, leading development teams, helping them design and develop more robust systems. Sharing knowledge will not only empower the society but also sharpen your own skills. In that direction, I have always tried to share my knowledge to the fullest. I want to show you that in software development, things are simple, but terms are scary ;)