CSS Filter Crash Course | Backdrop Filter | CSS Grid | Project Based learning

In this video, we will be using CSS filters to apply visual effects on an image and then on an HTML element. We will also explore backdrop filters and create a project to apply multiple visual effects on one single image using backdrop filters and a CSS grid. 📣 Check out my other crash courses 🐱 JavaScript Crash Course: https://youtu.be/dY8li4JnoWQ 🐶 LWC Crash Course: https://youtu.be/bLyAsIeDZtw 🐼 Salesforce Integration Crash Course - https://youtu.be/2myol9hI28c 🐭 SLDS Crash Course: https://youtu.be/HDsuCGbtqyk Check out the code: https://codepen.io/sfdcfacts/pen/yLMZNPo This CSS crash course on CSS filters is meant for every web designer as it adds a cherry to the cake on your web designs. 00:00 CSS Filter Crash Course 00:27 CSS Filter Explained 1:23 CSS Filter Browser Support 1:55 CSS Backdrop Filter Explained 2:17 Project Overview 2:35 CSS Backdrop Filter Browser Support 3:20 Project Implementation 5:36 Apply/Add CSS Filters on an Image 6:41 Apply multiple CSS Filters 9:33 Apply/Add CSS Filter on an HTML Element 12:28 Create CSS Grid Layout 12:52 What is CSS Grid Layout 16:56 Add/Apply CSS Backdrop Filters 20:26 Add random cells in CSS Grid 21:15 Create Mondrian using CSS Grid 26:10 Overlapping Cells in CSS Grid 26:17 Applying CSS Filter to multi-layer background 27:35 Enable CSS Backdrop Filter in Firefox 28:16 Enable CSS Backdrop Filter in Safari About: Manish is a highly experienced Software Developer who has worked in big tech companies like Google and Salesforce. Presently he is associated with Amazon as SDE 2. He is on his journey to make everyone interview ready for the big 5 FAANG (Facebook, Amazon, Apple, Netflix, Google) companies. Check out his channel for comprehensive tutorials on various technologies and mock google/amazon interviews. 🎓 My courses on Udemy (discounted links below): 📹 The Complete Salesforce Development Course - https://www.udemy.com/course/salesforce-development/?referralCode=C44BBFDBBBA789BC6A3D 📹 The Ultimate Hands-On Lightning Web Component - https://www.udemy.com/course/lightning-web-component-development/?referralCode=B29D1E8015D945236DBA 📹 The Practical Guide to SFDX and Salesforce CLI - https://www.udemy.com/course/salesforce-cli/?referralCode=91D0F7061562D1B59737 Follow SFDCFacts Academy: Website: https://sfdcfacts.com Facebook: https://www.facebook.com/sfdcfacts Instagram: https://www.instagram.com/sfdcfacts LinkedIn: https://www.linkedin.com/company/sfdcfacts Connect with Manish: https://www.linkedin.com/in/manish-choudhary/ Twitter: https://twitter.com/sfdcfacts Become a patron and support my work here: https://www.patreon.com/sfdcfacts #cssgrid #cssfilter #cssblendmode #cssproperties #webdesigner #webdeveloper #webdevelopment #htmlandcss