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

Sdílet
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

Komentáře • 10

  • @SFDCFacts
    @SFDCFacts  Před 2 lety

    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

  • @ADITYASINGH-ih2hz
    @ADITYASINGH-ih2hz Před 3 lety +2

    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!

  • @saptarshidas7877
    @saptarshidas7877 Před 3 lety +1

    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.

    • @SFDCFacts
      @SFDCFacts  Před 3 lety +1

      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 ;)

    • @saptarshidas7877
      @saptarshidas7877 Před 3 lety

      @@SFDCFacts 😲 That's awesome Manish 🎉 #keeplearning

  • @rahulgawale
    @rahulgawale Před 3 lety

    Great session.. thank you 🙏

  • @HariomPrajapatii
    @HariomPrajapatii Před 3 lety

    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

  • @AshishSharma-mn6uc
    @AshishSharma-mn6uc Před 3 lety

    Interesting