SLDS Crash Course - Beginner's guide to CSS Framework of Salesforce Lightning | With Project
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 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 - th-cam.com/video/bLyAsIeDZtw/w-d-xo.html
Salesforce Integration Crash Course - th-cam.com/video/2myol9hI28c/w-d-xo.html
Modern Javascript Crash Course - th-cam.com/video/dY8li4JnoWQ/w-d-xo.html
CSS Filter Crash Course - th-cam.com/video/gx25xodfxY8/w-d-xo.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 😂😊
CSS has always been something that is tougher than both HTML and JS, because of the sheer amount attributes and selectors it has.
Figuring SLDS on top of that is worse. I always felt overwhelmed by SLDS, until today. This course has been like an eye opener.
Now I feel confident in SLDS. You really have a gift of teaching. Thanks a bunch!
Keeo at it bro! Your videos are helping the larger community.
Thank you so much! Really needed this, like really ❤️❤️
Looking forward to seeing more video like this.
Your video is always great and very informative. Thank you for sharing your knowledge.
Really helpful! Thanks
Superb Explanation... Thanks a lot 😊
wonderfully articulated everything thankyou
Thanks for this video!
Love the way you explain
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.
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.
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
Brief Crisp and Super Useful as always ...
More to come, stay tuned!
That is amazing video. your 57 minutes video will serve me for my whole career.
Very good Content.
Gud super explaintion
Best Video
A must watch video for everyone who wants to get their hands dirty with SLDS. As always amazing content 🙏
Thank you brother!!
Savage 🤩
very good explanation. Till now i feel like responsive SLDS is very difficult to achieve....
Welcome to real world 😉
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😊
Thanks Manish!! :)
Welcome bro!!
Great video, can you explain how to add images or icons and also show some javascript exemples?
nice work manish
Thanks
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.
Hi Sir, Can we create a Matrix like component in (LWC), I am brainstorming on it. 2*2 matix table
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.
Congratulation for Amazon
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.
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 😭
Hi sir. I hear about Accenture Innovation Challenge. 18 lakhs is there in prizes also. Please make a video on that sir.
Congrats for Amazon Sir.
Thanks! :)
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.
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
Will you make some projects on lightning
Yes!