Lightning Web Component Development

Name: Lightning Web Component Development
Rating: 4.8 (1638 reviews)

A step by step guide to be a Lightning Champion in no time. Concept to implementation

Created byAmit Singh

Last updated 1/2026

English

What you'll learn

What is Lightning Web Component?
Lightning Web Component Testing
Lightning Web Component Framework
Lightning Web Component Development
LWC & Aura Communication

Course content

23 sections • 212 lectures • 46h 15m total length

Introduction to Course1:12
In this lecture, you will get the course overview of what you are going to learn and what are some basic prerequisite for the course.
How to Access the Code0:05
In this lecture, you will get the link to the code that is used in the course.
How to get Help0:11
How to Succeed with the course12:48

Introduction JavaScript10:46
Difference between var, let, const7:29
Date & Date Time in JavaScript7:11
Map & Set in JavaScript11:27
Operators in JS7:21
difference between == & === in JS4:50
String functions in JavaScript17:02
Objects in JavaScript24:13
if-else in JavaScript6:20
Loops in JavaScript & Switch Statement15:28
Arrays in JavaScript20:37
Array Methods in JavaScript Part214:15
Array Methods in JavaScript Part315:42
Function in JavaScript15:46
Arrow Function in JavaScript11:13
Console Method in JavaScript10:18
SetTimeOut vs setInterval10:16
Promise in JS25:52
Async Await in JavaScript11:23
Event & Event handlers in JavaScript19:21
addEventListener in JavaScript7:46
CustomEvent in JavaScript6:56

Why Salesforce Introduced LWC?18:37
In this video we will see why salesforce introduced lightning web component as salesforce already have a way to develop lightning component
Signup for your first free developer edition org3:17
In this session students will get to know how to get the lifetime free salesforce free developer edition org where and how to enable the my domain in salesforce environment. As My Domain is the pre-requisite to work with lightning component.
Setup Visual Studio code & Salesforce CLI5:45
In this session, students will get to know how to setup VS code to start developing LWC and how Salesforce CLI is the important for developing the LWC from vs code.
Authorise your salesforce environment from VS code for 2 different purpose8:45
In this session, students will get to know how to authorise salesforce org as devhub from VS code and enable devhub in Salesforce Environment.
Introduction to Scratch Org & Org Definition file10:42
In this lecture, you will learn all about scratch org and how to setup that scratch org using configuration file.
Setup Scratch Org and Deploy the Code into Org9:18
Benefits of Scratch Org8:15
Setup Scratch org with Sample Data5:12
Automate the creation of Scratch Org14:03
Automate Scratch ORG Creation for Windows OS0:31
Web Component Fundamentals(HTML 5 vanilla components)11:41
In this lecture, you will learn all the fundamentals of Web Component that we will be using in the course
Overview of Lightning Component Library3:51
In this lecture, you will get to know what is the best resource to learn LWC and Aura Components.
Make Salesforce Environment Ready
Test Your Knowledge

Code Repo Link0:05
Lightning Web Component Bundle3:14
In this lecture, you will get to know the structure of Lightning Web Components what all files you can have inside a single component.
Hello world Web Component11:46
Create your First Web Component!
Apply Styling(CSS) to your web component10:32
Create a beautiful component using Style file of web component
Data Binding from JavaScript Class to Web Component7:08
In this lecture, you will learn how to create variables in JavaScript and use them in Web Component
Basic Overview of Html Events15:55
In this lecture, you will learn some basic overview of html events and how to call JavaScript method from Web Component
Conditional Rendering - use if else in your web component with tom & jerry16:37
In this lecture, you will be able to learn how to use if-else in Web Component and how if-else are saviour
Conditional Rendering - Nested If-Else in LWC12:47
How to access JS objects in HTML13:30
Display your list in lightning web component (looping & iteration)14:41
In this lecture, you will be able to display a list of records in web component using iteration or for:each
LAB - Develop a Simple Calculator ( Addition & Subtraction )14:14
Develop a Simple Calculator with addition & subtraction
LAB - Develop a Simple Calculator ( Multiple & Devision)11:17
Modify the Calculator to add extra functionality
Test Your Knowledge

Code Repo0:05
Decorators in Lightning Web Component16:54
In this lecture, you will be able to get what all Decorators are available in Decorators in Lightning Web Components and how to use them
Directives in Lightning Web Component4:02
Getter Property15:03
Use getter property if you want to modify the property before you use in template.
Use getter property when you do not want to create a variable
Work with Get & Set Property Together13:18
JavaScript Boolean Property0:27
Learn what are boolean objects and how & when to use them in web components
Getter-Setter Example (Product Calculator)13:33
Modify Calculator Component
Knowledge Test on JavaScript Fundamentals

Component Composition in LWC (parent child)11:00
Pass the value from parent component to Child Component11:53
Overview of LWC LifeCycle Hook5:51
Constructor in LWC (LifeCycleHook)10:17
connectedCallback in LWC10:54
renderedCallback() Method in LWC15:27
errorCallback method in LWC10:00
disconnectedCallback method in LWC10:49
render method in Lightning Web Components22:23
Slots in LIghtning Web Components12:59
Shadow DOM in Salesforce LWC [Real Time Demo]13:56
Metadata file Explanation19:09
In this lecture, you will get to know all about the configuration file.
How to expose variables to Lightning App builder
How to specify for which object an LWC can be accessed.
How to Use LWC in Flow & Custom Tab6:19
LAB - Create a Contact List component using Composition9:01
In this lecture, we will learn how to display contact list using Parent-Child Web components.
Parent component having the list of contacts.
Child component displaying the contact information.
Test your knowledge

When To use Events in LWC2:45
In this lecture, you will learn what are the various scenarios in Lightning Web Component where you can use Events.
Browser Event
Custom Event
Create Your First Event in Lightning Web Component With & Without Data14:11
In this lecture, you will learn how to pass single/multiple data from child to parent component.
Prepare the Code for Event Propagation10:48
Event Propagation in Lightning Web Component13:44
In this lecture, you will learn what is bubbling event and when to use it
Call Child Component Method using Parent Component8:06
In this lecture, we will learn how we can call the child component method from parent component JS class using @api functions.
Call Child Component method without params
Call Child Component method with params
Share JavaScript Code between components8:44
As a best practise we always need to put the common code in shared JS file. So in this lecture, you will learn how to share the code between components.
Create a Shared File inside the same LWC Folder Structure
Create a Separate component and put the common code inside that component.
Create Reusable CSS Module in Salesforce9:34
LAB - Quick Case Component Structure9:12
In this lecture, you will be creating a Quick Case Component which we will be using in Contact & Account Object Record Page.
Create the UI for QuickCase Component.
Add the Event Listener for each input to capture the input data.
Test Your Knowledge

Introduction to LDS4:25
In this lecture, you will be able to learn what is Lightning DataService and how does data service work in salesforce. What are benefits of LDS. We can do below things with LDS
Create Records
Edit Records
View Records
Read-Only Records
Get Current Record Id & Object Api Name9:20
In this lecture, you will get to know how to get the Current Record Id and Object API Name in JavaScript without using a single like of apex code.
@api recordId
@api objectApiName
LDS View Record - RecordViewForm & RecordForm13:12
In this lecture, you will get to know how to view record using Lightning Data Service
Load a record using Lightning Record View Form5:40
LDS Edit Record - RecordForm & RecordEditForm11:38
In this lecture, you will learn how to edit a record without using Apex Class and what are the benefits of LDS
LDS Create Record - Record Form & Record Edit Form16:00
In this lecture, you will learn how to create a Record using LDS and handle different methods without using apex.
Call Apex Class Method using @Wire18:04
In this lecture, you will learn how we can call the apex class method using @wire decorators
How to pass parameters in @wire method12:03
In this lecture, you will learn how to pass the parameters in @wire method
Consideration of using @Wire Method4:22
Refresh Apex in Lightning Web Component16:45
Call Apex Class Method using imperative method18:41
In this lecture, you will be able to learn how to call an apex class method using button click with or without parameters
uiRecordAPI Get Record method to query the record14:26
Update Record using uiRecord API11:58
Create Record using uiRecord API10:38
Delete a record using UI Record API5:50
get object information using object info api.8:40
In this lecture, you will learn the complete objectInfoAPI
getObjectInfo
Get picklist values using ui object info API7:37
In this lecture, you will learn the complete objectInfoAPI
getPicklistValues
Get All the picklist values of an object based on the record type5:23
In this lecture, you will learn the complete objectInfoAPI
getPicklistValuesByRecordType
LAB - Create Custom Lookup Part 18:16
In this lecture, you will learn how to create a custom reusable lookup in web component
LAB - Create Custom Lookup Part 29:41
LAB - Create Custom Lookup Part 310:33
LAB - Wrap up the Custom Lookup7:53
In this lecture, we will wrap up the the Custom Lookup
Modify Quick Case Component
Test Your Knowledge

Code Repo0:05
Display Toast Notification16:01
In this lecture, you will learn how to show a toast notification in Web Component
Navigation in Salesforce16:58
In this lecture, you will learn how to navigate to different url using lWC
How to Navigate from one LWC to another LWC11:19
CurrentPageReference in Lightning Navigation - Read Params from URL9:46
Work with Custom Labels in Lightning Web Components12:32
In this lecture, you will be able to learn how to get Custom Labels in Web Component
Work with Static Resource in Lightning Web Component14:12
In this lecture, we will learn how to use Static Resource in LWC and How to load third-party libraries in Lightning Web Component.

Make Lightning Web Component Mobile Ready9:32
DataTable in Lightning Web Component12:24
Display Lookup Record values in Datatable5:45
Display link in datatable8:11
Display Icon in Datatable6:52
Row Level Action in DataTable8:55
Sort Lightning DataTable11:01
Inline Editing in DataTable14:11
Map in Lightning Web Component13:43
Progress Indicator Component in LWC9:05
Implement Progress Indicator in LWC15:17
Tabs in LWC10:16
Use LWC inside Community11:33
Effective Way for Error handling in LWC8:00

Requirements

Basic Understanding of SOQL(Salesforce Object Query Language)
Basic understanding of Apex Development
Basic Understanding of JavaScript & HTML5 Web Standards
HTML & CSS Knowledge is Must

Description

Note:- If you do not know the basics of HTML & CSS Please do not enroll for the course.

Lightning Web Component is a new methodology to develop Salesforce Lightning Components. This course is designed to help you understand three basic things:

What are Lightning Web Components?
Why Salesforce has introduced Lightning web component?
How can you develop Lightning web components?
What are all the best practices to develop the lightning web components?
What are various patterns anti patterns to develop the lightning component?
How to use Lightning Web Component in various places?

In this course, we will mainly focus on the Lightning Web Component Development where we will be providing the examples in each section which we prefer as mini project so that you can be master of the Lightning web component.

As we know that LWC is the new concept and still new to the market and this course will make you the master of the Salesforce Web Components and make you a valuable salesforce gem which will give you the boost to your career.

If you are thinking that you are ground level in web component or salesforce then no need to worry I am here to help you which will make you master of lightning web component.

Who this course is for:

All Salesforce Developers
Experienced Salesforce Admins
Salesforce UI & Salesforce UX developer
Professional who wanted to migrate Aura Component into LWC Components

Lightning Web Component Development

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 14min

Introduction to JavaScript22 lectures • 4hr 42min

Setup Environment & Getting Started12 lectures • 1hr 40min

Lightning Web Component basic Development12 lectures • 2hr 12min

JavaScript Fundamentals7 lectures • 1hr 3min

Web Component Lifecycle Hooks & Compositions14 lectures • 2hr 50min

Communication using events8 lectures • 1hr 17min

Working with Salesforce Data22 lectures • 3hr 51min

Navigation Service & Other Features7 lectures • 1hr 21min

DataTable & Useful Components of Lightning Web Component14 lectures • 2hr 25min

Requirements

Description

Who this course is for: