CSS Filter Crash Course | Backdrop Filter | CSS Grid | Project Based learning
Vložit
- čas přidán 9. 07. 2024
- 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: • Modern JS Crash Course...
🐶 LWC Crash Course: • Lightning Web Componen...
🐼 Salesforce Integration Crash Course - • Salesforce Integration...
🐭 SLDS Crash Course: • SLDS Crash Course - Be...
Check out the code: 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 - www.udemy.com/course/salesfor...
📹 The Ultimate Hands-On Lightning Web Component - www.udemy.com/course/lightnin...
📹 The Practical Guide to SFDX and Salesforce CLI - www.udemy.com/course/salesfor...
Follow SFDCFacts Academy:
Website: sfdcfacts.com
Facebook: / sfdcfacts
Instagram: / sfdcfacts
LinkedIn: / sfdcfacts
Connect with Manish:
/ manish-choudhary
Twitter: / sfdcfacts
Become a patron and support my work here: / sfdcfacts
#cssgrid #cssfilter #cssblendmode #cssproperties #webdesigner #webdeveloper #webdevelopment #htmlandcss
Do you find this video helpful? Here are my other crash courses you might be interested in:
⏭ Modern Javascript Crash Course 🔗 czcams.com/video/dY8li4JnoWQ/video.html
⏭ Salesforce Integration Crash Course 🔗 czcams.com/video/2myol9hI28c/video.html
⏭ LWC Crash Course 🔗 czcams.com/video/bLyAsIeDZtw/video.html
⏭ SOQL Crash Course 🔗 czcams.com/video/kw6SFQWQ11Q/video.html
⏭ SLDS Crash Course 🔗 czcams.com/video/HDsuCGbtqyk/video.html
Nice tutorial.. i honestly had no idea about CSS filter and wondered how the CSS developers match everything with the wireframes. So, definitely i learnt something new today. Thanks for the video!
Glad it helped!
never knew we could do this much using CSS only.
Just finished your CoWin project from udemy. That's awesome.
If possible add some Apex REST integration courses.
Thanks.
You are right on time Saptarshi!! The complete Apex Integration crash course is coming soon. This crash is one of the most jam packed crash course of mine (with 2 projects), where you will learn all about integration
- Integration terminologies
- Making callouts to open apis
- Using postman tool
- Making callouts to secured apis with Auth token
- Making callout from Apex
- Define Webservices in Apex
- Connect 2 Salesforce orgs
- Auth Provider, Connected App, Named Credential
What??? did I reveal too much? doesn't matter, I love you guys and you should know what's coming ;)
@@SFDCFacts 😲 That's awesome Manish 🎉 #keeplearning
Great session.. thank you 🙏
Glad you enjoyed it!
keep posting and please tell me how a non-tech freasher get job in salesforce ecosystem and how we can get internship , volenter project also. cause i have done journey2saalesforce program and not getting 1 interview call till yet
Interesting