Angular Material Theming In-Depth
What you'll learn
- How to implement Dark Theme for your Application
- How to properly theme your custom components in your angular application
- Understanding of a color system in Material Design and Angular Material and how to configure and extend your own color palette
- Basic SCSS language syntax and features like: Variables, Modules, Loops, Hash-Maps, Functions etc
- How to override default values of Angular Material Theme
- How to configure density of your Angular Material Theme
- How to work and configure Typography in Angular Material
- How to lazy-load Themes and decrease bundle size for your styles
- A little experience with Angular needed
- Needed understanding of what is Angular Material library
Because I love to write clean, predictable, and extendable code I am always trying to understand how things are REALLY working under the hood! If you feel the same then the course "Advanced Angular Material Theming" is for you!
After this 4 Hours-Course, you will know how to properly manage your Angular Material Theme and bring some order in your (S)CSS. We will not be hacking it but rather gracefully extending it.
How do we achieve it?
Firstly, we will start with learning the basics of the SASS(SCSS) language. Why would we need it? The thing is that the Angular Material Theme is written with SASS language and if we want to extend and reuse functionality from it - we need to "speak the same language". You will not be overwhelmed by it because we will cover only the SASS features we need for this course.
Secondly, I will cover some fundamentals of Material Design specs like colors or typography anatomy, so eventually, for you, it will be clear why things are done this way and not the other way around.
Thirdly, we are going to expose the internals and source code of the theme. It will give you an overview of how things work under the hood, the theme's hidden features, and limitations.
What I will be able to do after the course?
After the course, you will be able to write (refactor) your Theme in such a way that your styles will be consistent, lean, and maintainable. You will be able how to switch color palettes, extend your base color palette with extra ones like success or info color, and fetch different shades (darker, lighter). The course will give you an understanding of how to build a Dark Theme and how to load it on-demand (lazy), so you can ultimately 2x decrease your CSS bundle size. You will know how works typography and how to define different font sizes or font families for your titles, buttons, inputs, and paragraphs. You will be able to change density (sizes) for some of the Material components and your custom ones. And this is just a small part of what you will learn along the line. To see the full list please scroll a little bit down to curriculum.
Hear what my students have to say
"Very detailed and clear course. In case you want to learn SCSS and Angular Material more deeply this course will help you." – Ali Bayatpour
"The best course on material usage iv come across. I have learned more in the first few videos than in other entire courses. I highly recommend it!" – Sam Keel
"Amazing!" – Nelson Sanchez Arguedas
This course DOES NOT include Angular CDK and Angular Material Components. It is focused exclusively on Theming.
If you want to learn Angular Material or Angular CDK you should not buy this course.
Who this course is for:
- Angular Developers who use Angular Material in their Projects
- Angular Developers who tired of the mess in their CSS and Angular Theme
My name is Dmytro Mezhenskyi. I am a Google Developer Expert in Angular and I have been working as a Frontend Developer since 2012 and have experience with different projects, different scales and frameworks. Since 2020 I decided to run my YouTube channel about web development where I share my knowledge. Teaching has inspired me a lot and I decided to continue with it also on another platforms in order to help hundreds of people to be better developers.