SLDS Crash Course - Beginner's guide to CSS Framework of Salesforce Lightning | With Project
Vložit
- čas přidán 9. 07. 2024
- In this crash course of SLDS, we have covered from scratch how to build an application with hands-on experience. From styling components, layout, alignments solutions to delivering the final output with best practices for using the SLDS Validator.
📣 Check out my other crash courses
🐶 LWC Crash Course: • Lightning Web Componen...
🐼 Salesforce Integration Crash Course - • Salesforce Integration...
🐱 JavaScript Crash Course: • Modern JS Crash Course...
🐹 CSS Filter Crash Course - • CSS Filter Crash Cours...
Timestamps:
00:00 Beginner's guide to CSS framework - SLDS
1:37 What is SLDS? Why should we use it?
4:34 Project Overview
5:13 SLDS Documentation (Salesforce Lightning Design System)
7:44 Different ways to setup SLDS
8:39 Setup SLDS with NPM
10:26 Setup Liver Server in VS Code
11:07 Link SLDS CSS file
12:57 SLDS Text Utilities (Make text large, small, heading, Change text colour)
15:28 Text Alignment in SLDS
15:59 Add Borders in SLDS
17:51 Margin utility in SLDS
19:00 Padding Utility in SLDS
20:22 SLDS Grid - 12 Grid layout system
21:51 SLDS Column - Columns within a grid
23:32 SLDS Wrap - Make SLDS Grid responsive
24:28 Manage SLDS column sizes
26:12 Make SLDS Columns responsive based on device size
29:13 SLDS Grid alignment
31:12 Vertical SLDS Grid
32:00 Place element in the absolute centre
33:35 Pre-built (Out of the box) SLDS Components
36:51 SLDS Container
38:04 Project
57:06 Behind the scenes
Check out the code: github.com/choudharymanish858...
SLDS Documentation: www.lightningdesignsystem.com/
Be a Salesforce Developer and get a high paying job - www.udemy.com/course/salesfor...
Skill up your career by learning the most demanding Salesforce skill (Lightning Web Component aka LWC) - www.udemy.com/course/lightnin...
Salesforce Development to Deployment - www.udemy.com/course/salesfor...
About me:
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.
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
#slds #salesforcedesignsystem #cssframework #sldscrashcourse #topcssframesworks2021 #bestcssframework #salesforcecrashcourse
Do you find this video helpful? Here are my other crash courses you might be interested in:
LWC Crash Course - czcams.com/video/bLyAsIeDZtw/video.html
Salesforce Integration Crash Course - czcams.com/video/2myol9hI28c/video.html
Modern Javascript Crash Course - czcams.com/video/dY8li4JnoWQ/video.html
CSS Filter Crash Course - czcams.com/video/gx25xodfxY8/video.html
hi, I have a small confusion is it necessary to maintain the excel sheet for soql? like general qa testing?
The moment u said that u make a lot of mistakes behind the camera was very relaxing to hear so that we can feel everyone make mistakes 😂😊
Keeo at it bro! Your videos are helping the larger community.
Thank you so much! Really needed this, like really ❤️❤️
Superb Explanation... Thanks a lot 😊
Really helpful! Thanks
Your video is always great and very informative. Thank you for sharing your knowledge.
Amazing Manish!! Loved the course....also the bloopers(behind the scenes) at the end!! :D
And I love these comments, it means a lot to me. Yeah, bloopers is the new idea I tiger, I am glad to liked it. For more bloopers, fun posts and behind the scenes you can follow us on instagram instagram.com/sfdcfacts.
Thanks for this video!
Love the way you explain
wonderfully articulated everything thankyou
Looking forward to seeing more video like this.
Nice to be a subscriber of your chanel!
There is very rare content outside.
Thank you for sharing knowledge.
Nice to have you as a subscriber! You guys bless me everyday.
There is a lot more to come. 😄 Wish you all the best in your endeavours.
Brief Crisp and Super Useful as always ...
More to come, stay tuned!
This video made by day. Thanks a lot Manish for making this wonderful video and putting the time of yours to help the beginners like us...Absolutely loved the course. Its just matter of days, your channel will be going to reach/attract more no of viewers with this kind of quality content.
It is a pleasure Sai
Very good Content.
That is amazing video. your 57 minutes video will serve me for my whole career.
very good explanation. Till now i feel like responsive SLDS is very difficult to achieve....
Welcome to real world 😉
A must watch video for everyone who wants to get their hands dirty with SLDS. As always amazing content 🙏
Thank you brother!!
Savage 🤩
Best Video
Hi Sir, Can we create a Matrix like component in (LWC), I am brainstorming on it. 2*2 matix table
Thanks Manish!! :)
Welcome bro!!
Please make a vedio on how to use coustm css properties and styling hooks and in how many way we can apply style on lwc and shadow dom styling.
Great video, can you explain how to add images or icons and also show some javascript exemples?
Gud super explaintion
nice work manish
Thanks
Manish Sir,
Thank you so much for the course
Sir if you can also give us course in vlocity and vlocity cpq beginners to advanced...
Maybe one day
Thank you for amazing videos. Can you create a video about impelentation bootstrap on LWC OSS nodejs web app ? By the way you have amazing udemy courses about salesforce.
Hi Manish, I am a big fan of your classes! I would like to request you to prepare a crash course for visualforce
Bro, I would love to, but believe me, its not worth it. Visualforce is almost out, and why should we learn an outdated technology.
I know, but in all interviews, they are asking me about aura and visualforce 😭
Last part of the video is very good 😂
yep, that's behind the scene, exclusive for you guys.
Damn.. i missed the last part due to work!!😔😔
No excuses, You can watch it now.
Congrats for Amazon Sir.
Thanks! :)
As always, amazing video and great learning. Thank you Manish sir for this quality content.
I really appreciate you helping beginners like me in this beautiful world of Salesforce.
Thanks, again😊
Congratulation for Amazon
finally CSS is always a weak point for me when building LWC can you also do something similar for HTML
Will plan CSS3 crash course in future, for now, redesign your LWC components with SLDS.
Will you make some projects on lightning
Yes!
Please make a crash course on integration in salesforce using lwc.
Hi Saurabh, its already there in my Udemy course: www.udemy.com/course/lightning-web-component-development/?referralCode=B29D1E8015D945236DBA
Hi sir. I hear about Accenture Innovation Challenge. 18 lakhs is there in prizes also. Please make a video on that sir.