Salesforce LWC: Lightning Web Components with Live Project

Name: Salesforce LWC: Lightning Web Components with Live Project
Rating: 4.6 (549 reviews)

Learn Salesforce LWC with JavaScript, Apex, Wire, LDS, component communication, Jest testing and a real-world project

Created byDebasis Jena

Last updated 9/2026

English

English [Auto],French [Auto],

What you'll learn

What is Lightning Web Component framework?
Lightning Web Component Development
LWC and Aura interoperability
Supported browsers, tools and experience for lightning web components
Set up development environment and CLI command to work with LWC
Setup Devhub and scratch org and Importance of it
LWC Folder and File Structure
Useful Javascript Properties in lightning component
Nested/Component composition
How to communicate between components using Events
PubSub mechanism to communicate events
ways of accessing salesforce resources in LWC
Lightning Data Services and Base components to get salesforce data in Lightning web Components
Use Wire services to access data in LWC
Various to Invoke APex from Lightning web component
Continuous call and API call from Lightning web component
Uses of Navigation services in lightning web component
Introduction SLDS and various resources
Component life cycle and event best practices
Mechanism to Debug your lightning web component
Use Jtest to test your Lightning Web components
Best ways to migrate Aura component to LWC
Many more live scenario and step by step way to code the LWC
Complete access to source code for practice
Live Project with complete source code built on LWC

Course content

78 sections • 214 lectures • 32h 48m total length

Introduction To Lightning Web Component/ LWC in Salesforce6:06
Explore lightning web components (LWC) in Salesforce. Compare with Visualforce and Aura, and build reusable, performant UI using HTML, JavaScript, and CSS.
Difference Between Visualforce , Aura component and LWC7:10
Compare Visualforce, Aura components, and LWC to understand how client-side rendering, mobile performance, and browser-based features shape Salesforce Lightning development.
Web Component and evolution of Webstack18:02
Explore how web components create a standard model with custom elements, templates, shadow DOM, and ES modules, and how Lightning web components boost performance and interoperability.
Why do you go for LWC instead of existing Aura Components4:56
compare lwc with aura components, highlighting better performance and standards-based development. learn about security, testing, and compatibility benefits of lwc built on web standards.
Coexistence and interoperability of AURA and LWC3:42
Explore the coexistence of aura and lwc on the same page, showing how they share the same base and underlying data services and security.

Supported Browsers for LWC3:22
Explore browser support for lwc components across Chrome, Internet Explorer, Firefox, and Safari, detailing compatibility with Lightning Experience and Lightning Community and noting typical limitations.
Supported Javascript for LWC4:05
Explore which JavaScript versions and features Lightning web components support across browsers and devices, rooted in the ECMA standards from ES6 through ES9.
Supported Experience and tools for LWC4:12
Explore the tools and experiences supported by lightning web components, including mobile and desktop experiences, lightning out, communities, visualforce, and packaging through tooling API.

What are the things need to setup for LWC?2:07
Learn how to set up a complete development environment for lightning web components for a live project, including sign up, domain enablement, debugging tools, and cli workflows.
Lets Sign up for salesforce Account (if does not have)4:16
Sign up for a Salesforce account, obtain a lifetime free developer edition, and configure login details, including email, password, security questions, and domain enablement.
Enable My Domain in Your Development Org14:48
Enable My Domain in your development org to customize the login page and branding, configure authentication and logging policies, and support single sign-on for Lightning components.
Enable Debug Mode in Your Development Org6:22
Enable debug mode in your development org to easily read and debug JavaScript code within lightning components by selectively enabling it for developers or sandbox users.
Install Visual studio code11:40
Install Visual Studio Code to develop lightning web components for Salesforce, and learn to download, install, and configure the editor for debugging and IntelliSense.
Install Salesforce Extension pack12:00
Install the Salesforce extension pack from the marketplace to enable Salesforce development in Visual Studio Code and explore lightning components.
Install Salesforce CLI11:59
Install and configure the Salesforce CLI to streamline development and build automation, set environment paths, and integrate with Visual Studio Code and Salesforce extensions.

Setup main org as Devhub14:08
Set up the main org as devhub and configure scratch orgs to emulate different environments, then authorize and manage them with the Salesforce CLI and VS Code.
Create Project and Scratch org in Visual Studio code15:09
Create a project and scratch org in Visual Studio Code, using disposable scratch orgs to develop, configure, and test Salesforce data alongside sandboxes.

Understand basic of HTML template , Javascript and LWC configuration file22:20
Learn to create a lightning web component using an HTML template, a JavaScript file, and a metadata configuration, including the template master tag and exposure targets.
Expose our first LWC in Lightning Record Page8:42
Expose your first Lightning web component on a Lightning Record Page and see its placement on accounts and opportunities. Activate it and assign access via profiles.
Code for Meta file to expose component in a record page0:10

Different mechanism to style your lightning web component10:44
Explore styling lightning web components with standard syntax, the lightning design system, or per component css files, respecting naming rules and the rule that a parent cannot style its children.
Style your Lightning Web Component using Custom CSS (style file)21:08
Build and style a Salesforce Lightning web component with a custom CSS style file, then activate it on a Lightning page using the Lightning App Builder to view the styling.
Add CSS File and style code in our component23:00
Learn to add a CSS file and apply custom styling to a Lightning web component, using CSS attributes, classes, and background colors to improve look and feel.
Sample Code for Custom style sheet for your Lightning web component0:32
Style your Lightning Web Component using SLDS styling29:40
Learn to style a lightning web component using the Salesforce SLDS, applying prebuilt classes to tables and UI elements with inline options.
Sample Code -Style your Lightning Web Component using SLDS styling0:30
Share CSS Styles Among LWC13:16
Create a single CSS library to share styling across multiple lightning web components, then import that library into each component to apply consistent branding and rules.
Sample Code - Share CSS Styles Among LWC0:13

Javascript Fields, Properties and Attributes24:16
Learn to bind data dynamically in a Salesforce lightning web component using JavaScript fields, properties, and attributes, and distinguish public and private properties and reactive versus non-reactive behavior.
Use Private Properties in your component to bind dynamic data28:52
Learn how to use private and public properties in a lightning web component to bind dynamic input data, handle change events, and compute a running total with arithmetic operations.
Sample code for Private properties in LWC0:28

Requirements

basic knowledge of salesforce, javascript
Basic understanding of Salesforce Apex and SOQL is preferred
More important to have interest to learn salesforce lightning web component

Description

Learn Salesforce Lightning Web Components (LWC) from fundamentals to advanced development through hands-on coding and a complete real-world Salesforce project.

Lightning Web Components is Salesforce's modern UI development framework based on standard web technologies including JavaScript, HTML and CSS.

This course is designed for Salesforce Developers, Administrators and professionals who want practical experience building reusable, scalable and production-ready Lightning Web Components.

Rather than learning LWC concepts only through isolated examples, you will write code throughout the course and apply the concepts in a complete real-world project.

You will work with component architecture, JavaScript, events, parent-child communication, Lightning Data Service, Wire Service, Apex integration, Lightning Message Service, navigation, SLDS, lifecycle hooks, debugging, Jest testing and advanced LWC development patterns.

Be Expert with covering :

Build Salesforce Lightning Web Components from scratch using HTML, JavaScript and CSS
Understand the architecture and lifecycle of the LWC framework
Configure VS Code, Salesforce CLI, Dev Hub and development environments
Build reusable and production-ready Salesforce Lightning Web Components
Work with JavaScript properties, getters, events and reactive data
Implement parent-to-child and child-to-parent component communication
Communicate between unrelated components using Lightning Message Service
Retrieve Salesforce data using Lightning Data Service and Wire Service
Call Apex methods imperatively and using @wire
Implement CRUD operations from Lightning Web Components
Work with Salesforce navigation and Lightning Navigation Service
Build reusable components using composition and slots
Use Salesforce Lightning Design System (SLDS) and custom CSS
Handle errors, loading states, notifications and user feedback
Understand LWC lifecycle hooks and rendering behavior
Build secure Lightning Web Components using Salesforce security best practices
Test Lightning Web Components using Jest
Debug LWC JavaScript and Salesforce interactions
Understand Aura and LWC interoperability
Migrate Aura components to Lightning Web Components
Work with Salesforce GraphQL from Lightning Web Components
Implement modern RefreshView and data-refresh patterns
Build dynamic Lightning Web Components
Learn performance and enterprise LWC development practices
Complete a real-world Salesforce LWC project with source code

Who this course is for:

salesforce
Developer
Administrator
software professional
tester
Project Managers

Salesforce LWC: Lightning Web Components with Live Project

What you'll learn

Explore related topics

Course content

Introduction to Lightning web component5 lectures • 40min

Supported browsers , javascript, experience and tools for salesforce LWC3 lectures • 12min

Set up development environment for lightning web component7 lectures • 1hr 3min

Set up DEVHub and Scratch Org in salesforce2 lectures • 29min

How to create a new Lightning web component and its folder structure2 lectures • 17min

Understand basic of HTML template , Javascript and LWC configuration file3 lectures • 31min

Define styling to lightning web component8 lectures • 1hr 39min

Bonus Lecture1 lecture • 1min

Javascript properties in Lightning web component3 lectures • 54min

Use of conditional rendering using template if else2 lectures • 9min

Requirements

Description

Who this course is for: