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!
In this lecture, we will see how to create a basic angular app, with angular CLI (command line interface)
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
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).
In this lecture, we will discuss about the material icons (MdIconModule), and add some CSS styling to it.
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.
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.
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.
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.
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
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
In this lecture, we will discuss about adding snack bars (MdSnackBarModule)
In this lecture, we will play around with the side navigation component's modes like, side, over and push
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 ;)