Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Ultimate Hands-On Lightning Web Component Development

Name: The Ultimate Hands-On Lightning Web Component Development
Rating: 4.3 (5135 reviews)

Hands-on mastery of LWC with code examples and real-world projects to create high-performance Salesforce applications.

Created byManish Choudhari

Last updated 9/2024

English

What you'll learn

What is Lightning Web Component framework?
LWC Fundamentals
Javascript Fundamentals (including ES6 features)
Integration in Lightning Web Components
Reusability of LWC Components
Styling technique in LWC
SLDS - Salesforce Lightning Design System
Third Party Libraries in LWC
Lightning Navigation Service
Lightning Messaging Service
Calling Salesforce Apex in LWC
LWC and Aura Interoperability
Rent A Car Project Built with LWC
Over 15 Projects
LWC Crash Course (Under 100 Min)
Testing LWC
Lightning Quick Action and Lightning Tab

Course content

17 sections • 113 lectures • 17h 5m total length

Course Overview0:54
About Your Author1:27
Introduction to LWC10:49
We will start our course with the introduction to Lightning Web Components and why it is introduced by Salesforce.
Important - How to Get Most Out of This Course2:45
Important - A Note From Author0:35

What is Javascript5:46
Adding Console Statements5:28
Adding Comments in JS0:34
Declaring Variables3:08
Datatypes3:25
String Functions5:01
Arrays8:20
Objects10:55
String Concatenation2:42
Functions in JS14:40
Operators in JS3:41
Compound Operator4:15
Comparison Operator6:00
Arithmetic Operator5:19
Conditional Statement - If Else14:15
Conditional Statement - Ternary Operator5:56
Conditional Statement - Switch Case7:54
Loops in JS10:48
All Type Of For Loops in JS9:46
Array Functions - Map & Filter5:17
ES6 Spread Syntax9:24
JSON Functions3:19
OOPS in JS - Function Constructor11:07
OOPS in JS - ES6 Classes3:34
Working with DOM31:32

Set Up Development Environment3:22
Download and setup Salesforce CLI and VS Code for LWC Development.
Create Developer Org and Setup Dev Hub4:10
The course will use SFDX approach to explain LWC hence we need to create a new developer org and set it up as Dev Hub.
Create Scratch Org7:00
The scratch org is a source-driven and disposable deployment of Salesforce code and metadata. Changes from scratch orgs can be merged in one single org known as Dev Hub.
Explore Salesforce CLI Commands12:28
We are going to use Salesforce CLI commands very frequently to create Lightning Web Components, Apex Classes or to push our changes to scratch org. Make yourself familiar with all these commands with this lecture.

Two Paths From Here0:34
Component Bundle6:22
In this lecture, you will learn the number of files exist in a component bundle and usage of each file.
Hello World Component6:06
In this lecture, you will create your first Lightning Web Component and deploy it in a Salesforce Org.
Data Binding6:21
Learn how data binding works in LWC. Make our hello world component dynamic.
Applying CSS5:46
In this lecture, you would understand the different ways of applying the CSS to your component.
Conditional Rendering5:43
In this lecture, you will learn how you can hide or show your markup based on conditions.
Looping or Iteration5:08
In this lecture, you will learn how you can loop over your javascript array properties.
Project - Simple Calculator - Part 118:04
Let's put our fundamentals in practice and develop a simple calculator app.
Project - Simple Calculator - Part 26:36
In this lecture, we will complete our simple calculator application.
Bonus - Component Library Overview3:14
Salesforce has taken care of all our needs, and has already provided us enough documentation and tools to get started on LWC and Aura. In this video, you will see an overview of component library, the best place to find documentation of LWC and base components.

New Updates0:22
Legacy - Private Properties - Non Reactive3:57
In this lecture, you will learn how to declare a private property and how you can use it inside your html markup.
Private Properties - Reactive5:23
In this lecture, you will learn how to make your private properties reactive with @track decorator.
Spring'20 Update - All Properties Are Reactive3:09
Spring'20 Update - When To Use Track Decorator6:55
Getter Properties2:17
Modify your private property's value with getter and use it inside your markup. Getter can be used to perform some logic on your private properties before you access it inside html template.
Public Properties10:43
Public properties are the best way to accept values from parent components and make your component more dynamic. USe @api decorator to define public properties.
Public Boolean Properties2:28
In this video, you will learn the considerations of using a public boolean property inside your component.

Using Slots6:12
In this lecture, you will learn to pass html markup from parent component to child component.
Public Methods14:23
In this lecture, you will learn the usage of public methods and how you can call public methods of child component from the parent component.
Shadow DOM2:56
Learn why the properties of one component does not affect other components. Shadow DOM is one of the most important feature of lightning web component framework.
Component Lifecycle5:43
Learn about different events and their usage which gets fired as part of component lifecycle.

Dispatching And Handling Events12:50
Communicate between components of same hierarchy using events. Event fired from child component can be handled in child component itself or the parent components in same hierarchy.
Communication Between Independent Components13:52
Learn how you can communicate between independent components using events with publish and subscribe pattern.
Share Javascript Code5:27
You can share the Javascript between components using ECMAScript modules. This is always a good practice to share common code between components as it is easier to maintain the code.

Working With Salesforce Data - An Overview7:35
In this lecture, you will learn what the different ways to access Salesforce data with or without the need of Apex Controller.
Lightning Data Service - Create Record11:18
In this lecture, you will learn to insert a new record in Salesforce without writing any Apex code using Lightning Data Service.
Lightning Data Service - View Record10:05
In this lecture, you will learn to view an existing record from Salesforce without writing any Apex code using Lightning Data Service.
LDS - RecordViewForm and RecordEditForm10:01
It's even easier than Lightning Data Service to create or view Salesforce records if you use base components like recordEditForm or recordViewForm.
LDS - RecordForm Base Component12:41
RecordForm base component has the power of both recordEditForm and recordViewForm component. It's very simple yet very powerful component to create forms on UI with minimal amount of code.
Call Apex Method Using Wire Adapter8:16
In this lecture, you will to access an @AuraEnabled apex method from Lightning Web Component's wire adapter. The wire adapter provisions the data from apex methods to your component.
Call Apex Method Imperatively5:49
Wire adapter limits you to access only cacheable Apex methods, but you can access non-cacheable methods by making a call imperatively.

Display A Toast Notification4:17
In this lecture, you will learn how to display a toast notification in Lightning Web Component.
Get Record Id and Object Name From Framework3:48
To make pure generic components, sometime you need the help of framework. LWC framework can automatically supply you the record id and object name of currently viewing record. Learn the trick in this video.
Meta File Configurations5:37
The meta file of a Lightning Web Component bundle is one of the most important file. It holds all the meta properties of your component, you can use this to define different properties for different lightning container or make your component more generic using properties.
Lightning Navigation Service Overview3:41
In this lecture, you will learn what Lightning Navigation service is, navigation service methods and what are the different page types you can navigate to.
Examples of Lightning Navigation Service5:56
Let's use our knowledge of Navigation service to create different page types and navigate to those.
Using 3rd Party Libraries13:15
You can use 3rd party libraries in your component. Learn how you can do that in this video.

Requirements

Basic understanding of Salesforce Apex and SOQL is preferred

Description

Learn to build modern, high-performance Salesforce applications using the Lightning Web Component (LWC) framework! This hands-on course is designed to take you from the basics to advanced concepts, through practical, code-by-code examples and real-world projects ensuring you become proficient in LWC development. Whether you’re preparing for a job interview, a new project, or simply want to expand your Salesforce expertise, this course has everything you need.

What You’ll Learn:

LWC vs Aura Component Framework: Understand the significance and power of LWC
LWC Fundamentals: Gain a solid understanding of the core concepts of Lightning Web Components and their significance in the Salesforce ecosystem.
Complete JavaScript Tutorials: "Its important to have Javascript knowledge to master LWC". We know this, and has included a complete section to help you master JavaScript, including ES6 features and fundamentals, to build dynamic and interactive LWC applications.
Local Development: Learn how to develop and test your components locally using the Local Development Server.
Salesforce DX (SFDX) Basics: Explore the essentials of SFDX, including push, pull, retrieving, and deploying your code.
Base Lightning Components: Understand and utilize base Lightning components to enhance your LWC applications.
Looping and Conditional Rendering: Master the use of loops and conditional rendering to create dynamic components in LWC.
Component Lifecycle: Dive deep into the LWC component lifecycle and understand how it affects your applications.
Styling LWC Components with CSS: Learn how to effectively style your components using CSS to create visually appealing applications.
Salesforce Lightning Design System (SLDS): SLDS is the Salesforce design system that works hand in hand with LWC.
Component Communication: Explore various methods of component communication, including custom events, Lightning Messaging Service, PubSub module, and properties.
Calling Salesforce Apex from LWC: Learn how to use the Wire Service, REST callouts, and imperative calls to interact with Apex methods from LWC.
Integration in LWC: Discover how to make dynamic callouts, parse responses, and seamlessly integrate LWC with Salesforce data.
Navigation Service in LWC: Understand how to navigate between components and pages within your LWC applications.
Aura and LWC Interoperability: Learn how to integrate Aura and Lightning Web Components within the same application.
Testing Lightning Web Components: Master the best practices for testing and debugging LWC to ensure robust and reliable applications.
LWC Crash Course: Short on time? Preparing for a job interview? Our 100-minute LWC Crash Course video covers all the essentials, allowing you to grasp the fundamentals quickly.

Special Features:

LWC Crash Course: Short on time? Our 100-minute LWC Crash Course video covers all the essentials, helping you grasp the fundamentals quickly and prepare for your next job interviews.
Continuous Updates: Stay current with new features and updated tutorials to keep your skills sharp and relevant.
SLDS Crash Course: Master Salesforce Lightning Design System
Javascript Course: Get that Salesforce Javascript Developer Certification as the course has everything you need to prepare

Why Enroll?

Career Advancement: LWC is a powerful, modern framework that's in high demand. Adding LWC development to your skillset can make you a standout candidate in the Salesforce job market.
Hands-On Learning: This course is packed with real-world examples, projects, and exercises designed to give you practical experience.
All Skill Levels Welcome: Whether you're new to web development or an experienced developer, this course starts from the basics and progresses to advanced topics, making it perfect for learners at any stage.

Who Should Take This Course?

Salesforce Developers and Administrators: Looking to master the latest Salesforce technology.
Web Developers: Seeking to expand their skillset by learning a cutting-edge framework.
Job Seekers: Preparing for Salesforce-related interviews and looking to add LWC expertise to their resume.
LWC is still new in the market and learning LWC can make you a Salesforce gem and can give your resume another dimension.

The course can be very helpful for Salesforce Javascript Developer Certification aspirants as well, as it covers all fundamentals of javascript.

This course is offered by SFDCFacts Academy, renowned for top-quality Salesforce content, and taught by Manish Choudhari, an Amazon Senior Software Engineer and ex-Google, ex-Salesforce professional. With over 100k students worldwide and multiple "Bestseller" and "Highest Rated" courses on Udemy, you're in expert hands!

Who this course is for:

Salesforce Professionals
UI and UX developers
Experienced Professionals
Salesforce Developers and Admins
Students and Fresh Graduates

The Ultimate Hands-On Lightning Web Component Development

What you'll learn

Explore related topics

Course content

Introduction And Getting Started5 lectures • 17min

Javascript Fundamentals - Update 202125 lectures • 3hr 12min

Setup LWC Development Environment4 lectures • 27min

LWC Fundamentals10 lectures • 1hr 4min

Javascript Properties8 lectures • 35min

LWC Local Development1 lecture • 7min

Component Lifecycle & Composition4 lectures • 29min

Component Communication Using Events3 lectures • 32min

Access Salesforce Data7 lectures • 1hr 6min

Navigation Service and Other Features6 lectures • 37min

Requirements

Description

Who this course is for: