Lightning Web Components A–Z
Build modern Salesforce UIs with Lightning Web Components: templates, reactivity, events, Apex wiring, LDS, and deployment.
Instructor
Swarnil Singhai
About this course
Modern Salesforce UI development
Lightning Web Components (LWC) is Salesforce's modern, standards-based UI framework, built on native web components, ES modules, and real reactivity. If you've written any modern JavaScript, LWC will feel familiar; if you're coming from Aura, this is the lighter, faster future. This free course takes you from an empty component to a tested, deployed feature.
You'll learn component anatomy — the HTML template, JavaScript class, and metadata file — then reactivity with tracked fields, getters, and template directives. We cover event handling and communication between components, wiring server data with Apex and Lightning Data Service, and the platform niceties: navigation, toasts, and error handling. The final lessons cover unit testing with Jest and deploying your work to an org with the Salesforce CLI.
Prerequisites: working JavaScript (ES6+) and basic Salesforce familiarity. Outcome: you'll be able to build, test, and deploy real LWCs that read and write Salesforce data and behave well inside Lightning Experience. Completely free, with a video trailer to get you started.
Course curriculum
LWC Intro & Course Trailer
A quick trailer for the course: what LWC is, why it matters, and what you will build across the lessons.
Video
· Swarnil Singhai
2
Component Anatomy: HTML, JS, Meta
Dissect a Lightning Web Component: the HTML template, the JavaScript class, and the meta XML configuration file.
Article
· Swarnil Singhai
3
Reactivity, Getters & Template Directives
How LWC reactivity works with tracked state and getters, plus the core template directives for rendering and lists.
Video
· Swarnil Singhai
4
Handling Events & Component Communication
Communicate between components: DOM events, custom events with detail, and parent-child versus unrelated patterns.
Article
· Swarnil Singhai
5
Wiring Apex & Lightning Data Service
Connect components to Salesforce data using the wire service, Apex methods, and Lightning Data Service.
Video
· Swarnil Singhai
6
Navigation, Toasts & Errors
Use platform services: navigate with NavigationMixin, show toast notifications, and handle errors gracefully.
Article
· Swarnil Singhai
7
Testing with Jest
Unit-test components with Jest and sfdx-lwc-jest: rendering, user interaction, events, and mocking Apex and wire.
Article
· Swarnil Singhai
8
Deploying to an Org
Deploy Lightning Web Components to a Salesforce org with the Salesforce CLI, source tracking, and metadata deploys.
Video
· Swarnil Singhai