Teach on Udemy

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

Learn More

Your cart is empty.

Keep shopping

LWC Tutorial with Hands-on Project Development in Salesforce

Name: LWC Tutorial with Hands-on Project Development in Salesforce
Rating: 4.0 (4 reviews)

Salesforce Lightning Web Component framework with real-time project example step-by-step for beginner to advanced label

Created byVijay Kumar

Last updated 9/2024

English

What you'll learn

Lightning Web Component Development
How to communicate between components using Events
Component life cycle and event best practices
How to build efficient and reusable components using HTML and JavaScript in LWC
LWC Folder and File Structure
Many more live scenario and step by step way to code the LWC
Lightning Data Services and Base components to get salesforce data in LWC

Course content

10 sections • 112 lectures • 22h 45m total length

Introduction16:33
In this course I have covered complete syllabus of Salesforce Lightning Web Component framework with real-time project example step-by-step for beginner to advanced label.
Where you will be learn advanced technical scenarios based on live demo projects example of LWC in Salesforce.
This course is intended for developers who want to learn how to use the Lightning Web Components framework to build custom user interfaces on the Salesforce platform.
It is suitable for developers who have experience with JavaScript and web development, and want to learn how to use the Lightning Web Components framework to build modern, reactive user interfaces that can be easily integrated into Salesforce.
It is also suitable for experienced Salesforce developers who want to learn how to use the Lightning Web Components framework to build more efficient and scalable user interfaces.
I have taken care of who are brand new to start Salesforce Career as a developer and want to grow their Career in Salesforce development.

What you'll learn:-
What is Lightning Web Component framework?
What is Lightning Web Component framework?
LWC Folder and File Structure
Live Project with complete source code built on LWC
Nested/Component composition
How to use Javascript Properties in lightning component
Complete access to source code for practice
Many more live scenario and step by step way to code the LWC

LWC Setup Visual Studio Code for Lightning Web Component5:48
Setup Visual Studio Code For Lightning Web Component:-
How to Download Visual Studio Code and install in your system.
How to connect the VS Code with Salesforce org,
How to install Salesforce DX CLI.
How to apply command to test opening the window on VS Code.
How to install Salesforce Extension Pack.
Create Project and Connect to VS Code to Salesforce5:38
How to create Project and Connect to VS Code to Salesforce.
Create a Project in VS Code.
Connect VS Code to Salesforce Credential.

Create a LWC Component and Deploy to Salesforce8:10
Create a LWC Component and deploy to Salesforce
Create a Hello LWC Component.
Deploy Component from VS Code to Salesforce Credential.
Display User Personal Information & Pass the JavaScript Attribute value into LWC10:17
Display User Personal Information in LWC
Create a LWC Component Name as "userDetail".
Inside component create a HTML Table.
Here we will pass the JavaScript Attribute value into LWC Component.

Decorators Variables in LWC3:29
LWC Decorators Variable
What is difference between @api, @track and @wire decorators variable in LWC?
Use @wire Decorators in LWC12:59
Use @wire decorators in LWC
First, I will create a LWC Component name as "wireDecoratorLwc".
Then will create an Apex Class Method with AuraEnabled Annotation as "@AuraEnabled(cacheable=true)".
After that I will fetch the Opportunity records Using @wire decorators in LWC.
How to fetch all the related list of record in LWC18:44
How to fetch all the related list of record in LWC
First, I will create a LWC Component name as "relatedRecordLwc".
Use @wire decorator to fetch the related list of Opportunity records based on AccountId.
Use @wire decorator in the Lighting Data Service14:26
Use @wire decorator in the Lightning Data Service
First, I will create a LWC Component name as "dataServiceWireLwc".
Here I will display Two field of Account that is Name and Phone.

Data Binding in Lightning Web Component10:58
Data Binding in Lightning Web Component
First, I will create a LWC Component name as "dataBindingLwc".
Display full details of two input fields value.
How to use querySelector to Select an element in LWC19:57
How to use querySelector to select an element in LWC
First, I will create a LWC Component name as "querySelectorLwc".
Display the Input value on html Table on click button.
How to use querySelectorAll to Select all elements in LWC7:26
How to use query querySelectorAll to select all elements in LWC
Here I will use the same component that is created before "querySelectorLwc".
Display the Input value on html Table on click button.
How to pass value from child to parent in LWC7:55
How to pass value from child to parent in LWC.
→ I will create two component 1) parentLwc 2) childLwc.
→ Here will be use the @api variable and passing the value from child to parent component.
Apply if-else condition in LWC12:15
Apply If-else condition in LWC
I will create a component name as "conditionRenderLwc".
Here will be Show/Hide Container based on checkbox true/false.

How to show list of records using foreach loop using Imperatively Method in LWC15:32
How to show list of records using for:each loop in LWC
Here I will create a component name as "renderListLwc".
Then I will call the apex method and retrieve list of Account records using Imperatively on click button.
How to apply custom style CSS in LWC through JavaScript10:38
How to apply custom style CSS in LWC through JavaScript in LWC
Here I will create a component name as "applyCustomCssLwc".
Using the Style CSS, we will change the text color and text size of Heading an Paragraph in LWC Component.
How to display dynamic toast message in LWC9:47
How to display dynamic toast message in LWC.
Here I will create a component name as "toastMessageLwc".
Then will create a custom button to display dynamic toast message with custom functionality JavaScript in LWC.
How to display Modal Popup in LWC19:32
How to display Modal Popup in LWC
Here I will create a component name as "modalPopupLwc".
Then I will display a ModalPopup with a form inside as show/hide on click button in LWC.

How to Insert a record and navigate to record detail page in LWC25:18
How to Insert a record and navigate to record detail page in LWC.
Here I will create a component name as "insertRecordLwc".
Then I will create a Apex Class Method to Insert a Contact record in LWC.
How to Insert an Account record Using Apex Class in LWC19:43
How to Insert an Account record Using Apex class in LWC.
Here I will create a component name as "insertAccountLwc".
Then I will create an Apex Class Method to Insert an Account record in LWC.
How to Create Dynamically Form Validation of required field in LWC13:16
How to create dynamically form validation of required field in LWC.
Here I will create a component "formValidationLwc".
On Click button will be display required error message in LWC.
Create custom lightning spinner in LWC13:00
Create custom lightning spinner in LWC
I will create a component name as "lightningSpinnerLwc".
Then will be Show/Hide the Spinner Icon on button click in LWC.
How to Insert Edit/Update the records using data service in LWC15:42
How to Insert, Edit/Update the records in LWC.
I will create a component name as "updateRecordLwc".
Then will be Insert, Edit and Update the Contact record using Data Service in LWC.
How to use custom event & dispatch event in LWC19:52
How to use custom event & dispatch event in LWC.
I will create a component name as "lwcParent" & "lwcChild".
Then I will be passing the value from Child to Parent component in LWC.
How to navigate new record page in LWC11:10
learn to build a lightning web component that uses the navigation mixin to open a new account creation page from a button on a Salesforce app page.
How to navigate recent List View in LWC7:18
Learn to navigate the account list view and its recent view in a lwc component using the navigation mixin, including button setup, deploying code, and verifying results.
How to navigate Home Page in LWC6:47
Navigate to the home page from a lwc by clicking a button, using the navigation mixin to route to the home page.
How to navigate Chatter Detail Page in LWC6:26
Learn to navigate to the chapter page in an LWC using the navigation mixin, wiring a button click to a chapter navigator, and deploying to Salesforce.
How to navigate File Object in LWC7:47
Navigate the file object from a lightning web component using the navigation mixin service. Click a button to open the content document list in Salesforce.
Navigate to record in view mode and edit mode page in LWC17:28
Learn to navigate to a record's view and edit pages in a lightning web component by creating a navigation page with two buttons and using the navigation mixin.

Insert Contact automatically whenever Account is created using LWC object Apex12:16
Learn to create an account in LWC and automatically insert related contacts via Apex, passing the new account ID to each contact, with a parent account and child contact components.
How do variables work in JavaScript25:28
This lesson covers declaring var, let (late variable), and const in JavaScript, explains case sensitivity, reassignment and redeclaration rules, and global, functional, and block scopes with examples.
Difference between Object and Json in JavaScript10:55
Explore how objects in JavaScript store key-value pairs and how JSON (JavaScript Object Notation) converts objects to strings with stringify and back with parse, through lab demos.
Data types in JavaScript18:02
Explore the eight basic data types in JavaScript—number, string, boolean, undefined, null, object, array, and symbol—through hands-on examples in VS Code, using console.log and typeof to inspect values.
QuerySelector and QuerySelectorAll in JavaScript18:21
Learn how to use document.querySelector to select a single element and document.querySelectorAll to select multiple elements in JavaScript, apply styles, and modify innerHTML.
Event and Event Listener in JavaScript10:39
Explore events and event listeners in JavaScript, comparing HTML event handler attributes with addEventListener, and learn to show or hide a container using click events and DOM manipulation.
Event Propagation and Custom Event in JavaScript18:39
Explore event propagation in JavaScript, detailing bubbling and capturing. Learn to create and dispatch custom events to pass data from child to parent using the CustomEvent constructor.
setTimeout and setInterval in JavaScript14:14
Learn how to use window.setTimeout and window.setInterval in JavaScript to delay or repeatedly execute functions, with practical examples and how to stop them using clearTimeout and clearInterval.
How to Communicate between Child to Parent in LWC27:08
Learn to enable child-to-parent communication in LWC by creating and dispatching custom events to pass data between child and parent components, and control a modal popup.
Communicate between Child to Parent component using CustomEvent with object data19:17
Learn to pass data from a child to a parent in LWC using a custom event with a detail object and dispatch the event to control a modal.
Communicate between Parent to Child component using primitive data type in LWC24:13
Learn to pass primitive data types from a parent to a child in lightning web components using the @api decorator, binding the child in the parent, and rendering values.
How to Communicate between Parent to Child component using none primitive (Objec18:15
Enable parent to child communication in lwc by passing a non-primitive object from parent to child via an api-decorated variable, then render user details with a for-each loop.
How to Communicate between Parent to Child through Action Button in LWC27:59
Explore passing data from a parent to a child in lwc via an action button and decorated api, using parent Luke and child Luke to update a progress bar.
Internal CSS, Inline CSS, and Dynamic CSS in LWC23:42
Learn to create internal CSS and inline CSS, and apply dynamic CSS in Lightning Web Components, using JavaScript-driven width changes to build responsive Salesforce UI elements.
Lifecycle Hooks with real time example in LWC_Part -122:38
Explore lifecycle hooks in lwc with a real-time example, using a parent and child component to demonstrate constructor, connected callback, render callback, disconnected callback, and error callback.
Lifecycle Hooks in Discunnected Callback and Error Callback in LWC Part - 219:18
Explore lwc lifecycle hooks, including connected callback, disconnected callback, and error callback, through a parent and child component with show and remove actions.
PubSub Model to Communicate with one Component to another Component in LWC35:01
Learn how the pubsub model enables two LWC components to communicate without binding, using a publisher and subscriber to pass payloads between parent and child via three files.

How to navigate new record page in LWC11:10
Learn how to navigate to the new account creation page in Salesforce using a lightning web component navigation mixin, with a button click that opens a new account record form.
How to navigate recent List View in LWC7:18
Learn to navigate to the account recent list view in a lightning web component (LWC) on Salesforce using the navigation mixin, with a button and a list view target.
How to navigate Home Page in LWC6:47
Learn to navigate to the home page from a lightning web component by clicking a button, using the navigation mixin service library to set the home page target in Salesforce.
How to navigate Chatter Page in LWC6:26
Navigate the title page in a lightning web component using a button and the navigation mixing service to navigate to the chatter page in Salesforce.
How to navigate File Object in LWC7:47
Learn to navigate the file object in a lightning web component by using the navigation service library to open the content document in Salesforce via a button click.
Navigate to record in view mode and edit mode page in LWC17:28
Learn to navigate to a record detail page in view mode or edit mode from a lightning web component using buttons, the navigation mixing service library, and a record id.
How to navigate custom Tab in LWC8:35
Learn to navigate to a Salesforce custom tab from a lightning web component using the Navigation Mixing Service Library, wiring a button to the custom type API name.
Navigate to Record Relationship page in LWC11:28
Navigate to a record relationship page in lwc by clicking a button that uses the navigation mixin to open the related contact of an account.
Navigate to External Web Page in LWC7:08
Navigate to an external web page from an LWC component using the navigation mixin service, by adding a lightning button that opens a specified URL in Salesforce.
Navigate to LWC Page in Salesforce LWC9:28
Learn to navigate between LWC pages by clicking a button, using the navigation mixin service library to open another component page in Salesforce, with a navigation element constructed and deployed.
How to Navigate to Aura Component in LWC13:40
Learn to navigate from a lwc component to an Aura component using the navigation mixing service, wiring a button to pass an order component via page reference.
Navigate to Visualforce Page in LWC7:48
Navigate from a lightning web component to a Visualforce page using the Navigation Mixing Service library, triggered by a button click that opens the page with a generated URL.

Get the Quote Owner’s Manager’s Name in LWC5:32
Learn to retrieve the quote owner’s manager name and signature in LWC by executing a SQL query within a Visualforce page, using an Apex controller and a structured step-by-step workflow.
How to add and delete rows dynamically in LWC16:24
Learn to add and delete rows dynamically in lwc, create multiple code line items from an opportunity via a popup, and automatically associate them to code with a custom button.
How to insert lookup field in salesforce using apex framework in LWC7:32
Learn to insert a contact with lookup fields using Apex in a LWC component, including first name, last name, account lookup, and report to, with error handling and post-save navigation.
Create Account related Contacts automatically uses of LWC Apex Framework9:38
Learn to automatically create an account and related contacts using lwc and apex, with a two-section component that syncs contexts to the new account via a single button.
Search between two dates and get the all records in LWC5:23
Learn to search between two dates in an LWC, with from and to date fields and a search button that displays results in a table.
Pass dynamic recordId and display current record based on Record Id in LWC5:44
Learn to pass a dynamic recordId in a lightning web component, fetch the current opportunity via an apex class, and display it in a table with key fields.
Wrapper Class to retrieve list of records of Opportunity in LWC5:55
Learn to retrieve opportunity records with a wrapper class in a Lightning web component and display them in a table using wire in Salesforce.
Split and display multiple picklist value into single dropdown value in LWC7:00
Learn to split multiple picklist values into a single dropdown in an LWC component, using Apex and JavaScript to fetch, split, and display selected values from an opportunity record.
How to create horizontal tabs uses of selected radio group button vlaue in LWC7:37
Learn to build horizontal tabs in LWC using a selected radio group button to display corresponding data, including creating a lightning app and editing the page.
Get Current Position Latitude and Longitude of Google Map in LWC5:00
Show how to get the current Google Maps latitude and longitude in a lightning web component and display it with map markers in the Luke component.
How to display dynamic toast message with custom button functionality in LWC5:33
Display a dynamic toast message with a custom button in a lightning web component, wiring an on-click event to fire a toast event.
How to format today Date in DD/MM/YYYY in LWC4:21
Format today's date as dd/mm/yyyy in a lightning web component (LWC) by creating a lightning app, editing the page, and dragging and dropping the component into the layout.
Create vertical navigation bar to display selected menus in LWC8:00
Create a vertical navigation in a lightning web component that shows and hides right-side content based on the selected menu name, using a left sidebar.
Get recordId and display selected recordId on the page on click button in LWC9:17
Fetch the current record id and display the selected record id when a user clicks a button in the lwc component.
How to reduce space horizontally between label and input in LWC7:03
Learn to build a horizontal lightning form in LWC and reduce label–input spacing with form horizontal and custom CSS, featuring fields like name, email, and date.
Disabled all of input field values dynamically based on button click in LWC5:50
Learn to disable all lightning input fields dynamically with a button click in a lightning web component, using querySelectorAll and forEach to set disabled to true.
How to get custom metadata record based on recordId without apex in LWC8:23
Learn to fetch a custom metadata record by record id without apex in lwc using the lightning ui record api, and display it in a lwc component.
Imperative and Wire Service in LWC13:28
Learn to call Apex methods and retrieve account records using imperative and wire services in an LWC component, with a button-triggered list and automatic lead data display.
Create button menu with custom dropdown and display selected value in LWC10:51
Create a button menu with a custom dropdown in a Lightning web component and display the selected value and details from items: integration, Salesforce LWC, order our component, Salesforce Trigger.
Add dynamic CSS inline class add/remove, toggle and zoom-up/zoom-out in LWC12:00
Master adding and removing inline css classes to animate a lightning web component, toggling movement from top, bottom, left, right, and zooming in or out for dynamic UI effects.
How to create custom dynamic pagination in custom table using apex class in LWC12:00
Learn to build a two-pane lwc component with inline animation styles, showing and hiding panels via top, bottom, left, right, and zoom effects in a Salesforce lightning app.
How to display toast message with hyperlink and navigate to external URL in LWC9:15
Learn to display a toast message with a clickable link and navigate to an external URL using two buttons in an LWC inside a Salesforce app.
Inline to edit/save rows of records and refresh the page after successful save15:35
Create a Lightning data table in a lightning web component, enable inline edit and save for account records, and refresh the page to display updated values.
Data service to get current Contact record details without Apex class in LWC8:21
Fetch the current contact details in a lightning web component using the data service and lightning record view form, passing record id and object API name without writing a controller.
Create progress indicator bar circular/ring or horizontal slider/range in LWC10:20
Create and demonstrate circular and ring progress indicators alongside a horizontal range slider and direction toggle in an LWC component, with a live Salesforce demo.
Create lightning-card container with custom tab functionality in LWC11:23
Learn to create a lightning card with a custom tab interface in LWC, including a modal pop up opened by a button and a custom type section with multiple tabs.
How to get selected multiple picklist value in LWC7:55
Learn to implement a lightning web component with a dual list box to select multiple picklist values in Salesforce, handle changes with JavaScript, and display the chosen values.
How to display Google Map using lightning-map element in LWC6:07
Learn to display Google Maps in a lightning web component using the lightning-map element, with dynamic markers for three locations and a center from latitude and longitude.
Navigate to different page types like Records, Lists, Visualforce, Tabs, Report15:29
Learn to navigate various Salesforce pages—create record, detail, list, Visualforce, tag, report, and external web pages—using LWC navigation service with buttons linking to each page.
Handle multiple conditions template if:true to check against two values in LWC10:04
Learn to handle multiple conditions in lightning web components using two template if blocks to display contact data in a table or show errors, in a hands-on LWC tutorial.
How to access multiple custom label and static resource file in LWC11:35
learn to display custom label values as images, text, and links in a lwc component. follow three steps: create a custom app, edit the page, and call the component.
How to Create Account With Contact In LWC14:49
Explore how to create a contact and an account in a single button click using LWC, without a controller, with automatic association based on the contact's last name.
How to access static resource image and display in LWC8:01
Learn to access and display static resource images in a lightning web component by importing the static resource, binding image URLs, and rendering multiple images in a custom app page.
Display different type of lightning helptext message on mouse hover Icons LWC6:22
Learn to display different types of lightning help text on mouseover icons in a lightning web component using the lightning help text element.
How to create lightning-pill button with remove dynamically functionality in LWC8:10
Learn to create a lightning pill button in a lightning web component and remove it dynamically via a JavaScript function.
Create Responsive Layout Page Header, Footer, Left Sidebar, Right Sidebar in LWC8:03
Learn to build a responsive lwc page layout with header, footer, left and right sidebars, and a main container using lightning layout and lightning layout item.
Custom lightning spinner Show/Hide & Toggle on click button in LWC7:13
Learn to create a custom lightning spinner in an LWC component with show, hide, and toggle controls, demonstrated through a three-step setup and a modal spinner.
Apply regex patterns for Email, Phone & Pincode on custom form validation in LWC13:59
Apply regex patterns for email, phone, and pin code to validate a custom lightning web component form. Display inline errors and toast messages as users submit data.
How to get selected checkbox value and display the selected value in LWC11:21
Learn to capture checkbox selections with a Lightning checkbox group in LWC, display the selected value, and dynamically update the corresponding content as you choose among three checkboxes.
How to get logged in User Id, Name, Email, IsActive without apex class in LWC9:51
Learn to fetch the currently logged-in user's id, name, email, and is active flag in a lightning web component using the UI record API and wire, without apex.
How to display different types of custom toast message notifications in LWC11:48
Learn to display color-coded custom toast notifications (error, warning, success, info) in a lightning web component using show toast events, with a step-by-step setup and demo.
Get selected radio button value and checked default in LWC11:25
Learn to capture the selected radio button value in a Lightning Web Component, handle the onchange event, and display the chosen value in the component.
How to get custom metadata record through apex in LWC12:13
Fetch custom metadata through an Apex controller in a Lightning web component and display the records. Follow a three-step workflow: create a Lightning app, edit the page, attach the component.
Create lightning-datatable with Row Actions in lwc15:26
Create a lightning data table with row actions to open a modal popup displaying the selected contact’s first name, last name, email, and phone when you click the view icon.
Create custom lightning-carousel slider image in LWC9:23
Create a responsive LWC carousel image slider with a stop and play control and circle slide buttons, wired through a link component and integrated into a lightning app.
How to reset lightning input field on button click in LWC12:53
How to sort columns in ascending and descending order in LWC10:56
Learn to build a lwc data table that displays account records and enables column sorting in ascending and descending order, using Apex data retrieval and a sort handler.
How to create custom accordion section in LWC17:26
Develop a vertical accordion in lightning web components by building expandable and collapsible sections with active section control, toggle behavior, and a hands-on Salesforce live demo.
How to upload multiple file from LWC component to Salesforce10:30
Learn to create a lightning web component file uploader that enables selecting and uploading multiple pdf, png, and jpg files to salesforce, with a live demo and toast confirmation.
How to create range slider horizontal & vertical and get slider value in LWC10:27
Create horizontal and vertical range sliders in an LWC component, configure step values and sizes, display live slider values, and handle onchange events with a live Salesforce demo.
How to create multiple levels vertical menus with nested submenu in LWC13:38
Create multi-level vertical menus with nested submenus in Lightning web components using the Lightning tree element. Learn data-driven menu structures and expand-collapse interactions through step-by-step guidance.
How to fetch picklist values without apex in salesforce LWC12:15
How to delete multiple selected records with checkbox in LWC16:03
learn to delete multiple contact records in a lwc by selecting rows with a checkbox in a lightning data table, then click delete to remove them and refresh the view.

Requirements

Basic knowledge of Salesforce and JavaScript
Basic understanding of Salesforce Apex and SOQL
Basic knowledge of Salesforce Admin Concepts
Basic Knowledge of Internet Surfing

Description

Salesforce Lightning Web Components (LWC) is a framework provided by Salesforce for building user interfaces (UI) in web applications. It is designed to work within the Salesforce platform and allows developers to create dynamic, reusable components that can be easily integrated into Salesforce applications.

Some important key features and concepts of Salesforce Lightning Web Components:-

Web Standards: LWC is built on modern web standards, such as Web Components, JavaScript, and HTML. This makes it easier for developers familiar with these technologies to start building components.
Component-Based Architecture: LWC promotes a component-based architecture, where UI elements are encapsulated within individual components. These components can be reused across different parts of an application or even in different applications.
Reactivity: LWC supports reactive programming, meaning that components automatically update when data changes. This makes it easy to create interactive and responsive user interfaces.
Event Handling: LWC provides a mechanism for handling events within components. Components can communicate with each other by firing and handling events.
Data Binding: LWC supports two-way data binding, allowing data to flow between components and the underlying data model.
Base Lightning Components: Salesforce provides a set of pre-built, reusable components called Base Lightning Components that developers can use to create their own components. These components adhere to Salesforce's design system, ensuring a consistent look and feel.
Integration with Apex: LWC can interact with server-side logic using Salesforce's Apex programming language. This allows developers to perform server-side actions, such as querying the database or performing business logic.
Lightweight and Fast: LWC aims to be lightweight and efficient, which contributes to faster page load times and improved user experience.

Overview:-

In this course I have covered complete syllabus of Salesforce Lightning Web Component framework with real-time project example step-by-step for beginner to advanced label.

Where you will be learn advanced technical scenarios based on live demo projects example of LWC in Salesforce.

This course is intended for developers who want to learn how to use the Lightning Web Components framework to build custom user interfaces on the Salesforce platform.

It is suitable for developers who have experience with JavaScript and web development, and want to learn how to use the Lightning Web Components framework to build modern, reactive user interfaces that can be easily integrated into Salesforce.

It is also suitable for experienced Salesforce developers who want to learn how to use the Lightning Web Components framework to build more efficient and scalable user interfaces.

I have taken care of who are brand new to start Salesforce Career as a developer and want to grow their Career in Salesforce development.

In this course we will learn about the following topics:-

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

What will you be able to do after taking this course?

LWC Setup and Configuration Step by Step ::

LWC Setup Visual Studio Code for Lightning Web Component
How to create Project and Connect to VS Code to Salesforce?

Lightning Web Component Bundle Creation and Deployment::

How to create a LWC Component and Deploy to Salesforce?
Display User Personal Information and Pass the JavaScript Attribute value into LWC Component.

Decorators Variables in Lightning Web Component(LWC) ::

Decorators Variables in LWC
How to use "@wire " decorators in LWC?
How to fetch all the related list of record in LWC?
How to use "@wire" decorator in the Lighting Data Service?

Data Binding and Styling CSS in Lightning Web Component(LWC) ::

Data Binding in Lightning Web Component
How to use "querySelector" to Select an element in LWC?
How to use "querySelectorAll" to Select all elements in LWC?
How to pass value from child to parent in LWC?
How to Apply if-else condition in LWC?

Data Rendering and HTML Template in LWC ::

How to show list of records using foreach loop using Imperatively Method in LWC?
How to apply custom style CSS in LWC through JavaScript?
How to display dynamic toast message in LWC?
How to display Modal Popup in LWC?

Insert/Update, Form Validation, and Custom Event in Lightning Web Component(LWC) ::

How to Insert a record and navigate to record detail page in LWC?
How to Insert an Account record Using Apex Class in LWC?
How to Create Dynamically Form Validation of required field in LWC?
How to Create custom lightning spinner in LWC?
How to Insert Edit/Update the records using data service in LWC?
How to use custom event & dispatch event in LWC?

Who this course is for:

Salesforce Admin who wants to become from Admin to LWC developer
Salesforce Developers who wants to learn Lightning Web Component
Software Professional
Project Managers
Developer
Salesforce Administrator

LWC Tutorial with Hands-on Project Development in Salesforce

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 17min

LWC Setup and Configuration Step by Step2 lectures • 11min

Lightning Web Component Bundle Creation and Deployment2 lectures • 18min

Decorators Variables in Lightning Web Component(LWC)4 lectures • 50min

Data Binding and Styling CSS in Lightning Web Component(LWC)5 lectures • 59min

Data Rendering and HTML Template in LWC4 lectures • 55min

Insert, Update, Form Validation, and Custom Event in LWC12 lectures • 2hr 44min

Advanced LWC Scenarios With Hands-On Practical Examples17 lectures • 5hr 46min

Navigation in LWC Example12 lectures • 1hr 55min

LWC Project Based Scenario With Example53 lectures • 8hr 51min

Requirements

Description

Who this course is for: