Zero to Hero in Lightning Web Components

Complete Guide to learn Salesforce Lightning Web Components from Basics to Advance with real-time problems and projects

4.59 (7294 reviews)
Udemy
platform
English
language
Web Development
category
Zero to Hero in Lightning Web Components
35,227
students
39 hours
content
Oct 2023
last update
$99.99
regular price

What you will learn

HTML and CSS required for LWC

JavaScript required for LWC

What are Lightning Web Components?

Benefits of Lightning Web Components over Aura

Fundamentals of LWC with real time examples

How to Build reusable Lightning Web Components

Integration of LWC with APEX

Navigation Service

Lightning Messaging Service

Reusability of Components

Charts and Maps in LWC

CSV and PDF Generation in LWC

Memory Game in LWC

Styling technique in LWC

Many Real time features and Projects

LWC OSS with HEROKU

LWC Builder

Quick Actions in lwc

Description

Lightning Web Component framework is a new programming model to develop Salesforce Lightning Components.

The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch. Design AND code a huge project.

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

  • Fundamentals of HTML and CSS

  • Tools for Lightning Web Component Development

  • JavaScript is Required to master the LWC

  • Setup of Vscode, Salesforce DX, Dev HUB, Scratch Org

  • What are Lightning Web Components?

  • Benefits of Lightning Web Components

  • Data Binding and Properties

  • Getter and setter

  • Components Communication

  • Lifecycle hooks

  • PubSub module

  • Lightning Messaging Service

  • Rendering components conditionally

  • Template looping

  • Lightning Data Services and Base components to get Salesforce data in Lightning web Components

  • Navigation Service

  • Apex connection

  • Wire service

  • Reusability of Components

  • Styling technique in LWC

  • PDF Generation in LWC

  • Charts  in LWC

  • Maps in LWC

  • CSV generation in LWC

  • Memory Game in LWC

  • Many Real-time features and Projects

  • All latest features added.

  • Spring 22 changes

  • Summer 22 changes - lightningAlert, lightningPrompt, lightningConfirm

The course will mainly focus on Lightning Web Component development. We will take real-time problem statements and examples to learn about each and every topic.

If you are new to any web development framework, please do not worry as the course will start from very basic (ground 0) to help you understand how can you start coding web components.

If you are already an expert in Web Development frameworks, then this course will definitely be a major plus to your skills as it primarily focuses on learning modern web standards, building ECMAScript modules and developing UI components.

Content

Introduction

Introduction
Course Outline
Fundamentals of Web Technology
Tools for Web Development

HTML & CSS

Basics of HTML
Basics of CSS

JavaScript for LWC

JavaScript Learning Path
Variables
Data Types
null vs undefined
Spread Operator
Destructuring
String interpolation
String Methods
Object/JSON Operations
Array Methods
Promise
Modules import and export
QuerySelector
Events
Arrow Function
setTimeout vs setInterval

Lightning Web Component and Setup

Intro to Lightning Web Components
Setting Up Developer org
Setting Up Salesforce DX Environment
Setting Up My Domain and Dev Hub
Setting up Project and Scratch Org

Fundamentals of LWC

Create Your First Component in LWC
Component Folder Structure
Different Naming Conventions Available in LWC
App Creation and Component Deployment
Local Properties and Data Binding
Methods And Two way Data Binding
@track properties
Getters in LWC
Conditional Rendering
Template Looping

First Project - Quiz App

QUIZ APP

Composition and Query Selectors

Component Composition
Shadow DOM
Accessing Elements in the Component

Styling in LWC

Inline and External CSS
Lightning Design System
SLDS design token
Shared CSS
Dynamic CSS
Styling across shadow DOM

Component Lifecycle Hooks

Introduction to lifecycle Hooks
Lifecycle Hooks in Mounting Phase
Lifecycle Hooks in Unmounting Phase
Lifecycle Hooks in Error Phase
Render Method

Components Communication

Intro to Components Communication
Parent to Child Communication Approaches
Parent To Child Communication using primitive Data type
Parent To Child Communication using non-primitive Data type
Parent To Child Communication on action at parent component
Calling Child Method from Parent component
Child to Parent Communication Approaches
Child to Parent Communication Using Simple Event
Child to Parent Communication Using Event with Data
Child to Parent Communication Using Event Bubbling
Pubsub Module

Setter, Slots and CSS behaviour in parent child component

Setter Method
Passing Markup Using Slots
CSS behaviour in parent child component

Building Reusable Component

Building Reusable Component

Aura Coexistence

Aura Coexistence

Communication between Visualforce pages, Aura components, and LWC

Lightning Messaging Service
LWC to LWC Communication using LMS
LWC TO AURA Communication using LMS
LWC, AURA and VisualForce Page Communication using LMS

Salesforce Resources, Component Context and Notification

Introduction
Images from Static Resources
Third Party JavaScript Libraries in LWC
Using Third Party CSS Library
Content Asset Files
Internationalization
Access Labels
Check Permissions
Access Client Form Factor
Get Information About the Current User
Fetch Record Id and Object Name
Toast Notification

Memory Game Project

Memory Game

Navigation Service

Intro to Navigation Service
Navigate To Home
Navigate To Chatter
Navigate To New Record
Navigate To New Record With Default Values
Navigate To List View
Navigate To Files
Navigate To Record Page in View and Edit Mode
Navigate To Tab
Navigate To Record Relationship Page
Navigate To External Web Page
Navigate To LWC Page
Navigate To AURA Component
Navigate To Visualforce page
Fetch Current Page Reference

Base lightning components

Introduction to Work With Data In LWC
Lightning Data Service
Base Lightning Components
lightning-record-form
lightning-record-view-form
lightning-record-edit-form
Reset the lightning-record-edit-form
Edit the lightning-record-edit-form
Adding Custom Label to the Fields in Lightning-record-edit-form
Custom Validation in lightning-record-edit-form

Lightning Data Service Wire Adapters and Functions

Introduction
@wire service and fetch user details
How @wire is reactive
getObjectInfo adapter
getObjectInfos adapter
getPicklistValues adapter
getPicklistValuesByRecordType adapter
getRecord adapter
getFieldValue & getFieldDisplayValue functions
getListUi adapter
getNavItems adapter
getRecordUi adapter
createRecord function
updateRecord Function
deleteRecord Function

Apex in LWC

Introduction
Expose Apex Methods to LWC
Import Apex Methods
Wire Apex Method
Wire Apex Method with Parameters
Call Apex Methods Imperatively
Apex Imperative Method with Parameters

Books Listing App With Rest API Callout

Books Listing App

Component Configuration in LWC

Meta Configuration in LWC
LWC in Utility Bar
LWC in Lightning Tab

Real Time Features

PDF Generation in LWC
Charts in LWC
Maps in LWC
Filtering in LWC
Sorting in LWC
Reusable Modal Component in LWC
Date Validation
CSV Generation in LWC
What's More Coming to the Course in future

Reviews

Sureeth
November 20, 2023
I have learnt LWC from many sources but this resource is the best and apt . Thanks for your Hard work.
Klauber
November 17, 2023
There were some videos that didn't have an English translation, so it was left as it was prepared without much attention to this issue. In general, the instructor knows the subject well and can explain the content.
Aleksandra
November 12, 2023
Perfect course for beginners! All the relevant topics are covered and explained in details. Definitely not waste of time!
Prashant
November 11, 2023
Not for beginners teaching like revision class. Only for those who have deep knowledge on LWC and JS.
Anshaj
November 8, 2023
this course is very very helpful, its excellent even a person with no coding knowledge could become expert in lwc. Thank You so much sir for creating this course..
Anna
October 24, 2023
The course contains a lot of material. It is very interesting and useful. However, some tasks I haven't managed to complete by myself though I follow the same steps. I think the reason might be also something missed or outdated in given examples.
Shruti
October 23, 2023
excellent Course. I started this course as a beginner in LWC and today i am very clear about each and every concept and implemented the concepts in my projects. thanks for the excellent content and the way that is explained is so well and cleanly aligned.
Kamil
July 16, 2023
The course is very concise and informative. The ease with which the Topics are explained and the segregated parts of LWC during the course show the experience of the Tutor. Good Job and thanks for the great content. Yet to explore the Projects in the course but i hope it will be good.
vijaykumar
July 5, 2023
crisp and enough to get started handles information for all ready to learn with little or no background to topics
Syedtalalarif
July 3, 2023
The instructor is explaining the code in a very easy manner. In other courses you would find the instructor just pasting the code without explanation which makes it really hard to grab the concept
Prashant
June 29, 2023
khup chan ...............................................................................................
Madhura
June 10, 2023
So far good learning, examples are briefly and logically explained, easy to understand all topics covered.
Vishal
June 7, 2023
Unable to play the content , I purchased this course 3 months back but not able to access the content it keeps of loading
DKMorgan
June 5, 2023
I have enjoyed the course so far. I have hearing issues and use the transcripts to ensure I get the most out of the material. The transcripts appear software generated and have numerous errors based on interpreting the speaker's accent. Which leads to more issues than I started with. If you review them you will understand my dilemma.
Gurmukh
June 3, 2023
thank you for sharing your knowledge. The example projects are really helpful to understand the concepts.

Charts

Price

Zero to Hero in Lightning Web Components - Price chart

Rating

Zero to Hero in Lightning Web Components - Ratings chart

Enrollment distribution

Zero to Hero in Lightning Web Components - Distribution chart

Related Topics

3551562
udemy ID
10/7/2020
course created date
1/16/2021
course indexed date
Bot
course submited by