Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Salesforce Lightning Web Components(LWC, HTML,JavaScript)
Rating: 4.4 out of 5(109 ratings)
1,999 students

Salesforce Lightning Web Components(LWC, HTML,JavaScript)

Learn Step by step Salesforce Lightning Web Components using HTML, JavaScript and CSS
Created bySwapna 15 X Salesforce Certified Technical Architect
Last updated 1/2025
English

What you'll learn

  • Develop reusable Lightning web components
  • Create, Customize pages and Functions for Lightning Applications
  • build custom user interfaces, web and mobile apps, and digital experiences
  • create Lightning web component actions to enhance user experience

Course content

1 section • 45 lectures • 38h 56m total length

  • Introduction28:54

    • LWC -- Lightning Web Component

    • Pre-requists : HTML, CSS, JS (JavaScript), XML

    • HTML

    • CSS (Styles)

    • JavaScript

    • XML

    • Visual Studio

    • LWC Bundle

    • LWC Tags

    • UI Components ( LWC tags)

    • LWC Decorators

    • LWC Lifecycle Hooks

    • LWC --> Apex (call APex)--> Retriving the Data

    • Lightning Data Service

    • Lightning Design Systems (CSS)

    • DML Operation in LWC by Apex

    • Without Apex --> Import Salesforce Object, Fields

    • Calling LWC from Flows

    • Calling Flows from LWC

    • Real time scenarios.


  • Introduction-156:15

    • LWC -- Lightning Web Component

    • What is LWC?

    •   UI --> User Interface

    •   What is Required to build Web-based software applications for a business?

      • Front-End  Technologies: HTML, CSS, Visualforce Page, JavaScript, Aura, XML, React, SLDS

      • Salesforce Front-End Technologies: HTML, Visualforce, CSS, Aura, LWC, Lightning Flow

      • Business Logic Technologies: APEX, JAVA, .NET, SOQL, SOSL, Python, C, SAP

      • Salesforce Business Logic Technologies: APEX, SOQL, SOSL

      • Back-End Technologies: Oracle, SQL,RDBMS,Database.com

      • Salesforce Back-End Technology: Database.com

       

    • Why LWC?

      • Performance

      • Web Standards-driven

      • Open Source

      • Data binding

      • Enhanced tool


    • Prerequisites : HTML, CSS, JS (JavaScript), XML

    • HTML

      • Hypertext Markup language:  HTML is a Language for describing the webpages

      • It is markup Language

    • CSS (Styles)

    • Scripts

    • JavaScript: It is Programming Language

    • JS used to make Websites and applications are interactive

      • Data Types

      • Variables

      • Assign the value Variables

      • Array

      • Assign the Values to Array

      • Retrieve the values from Array from Variables

      • Object (Declaration)

      • array and Object

      • Assign and Retrieving the values from the Object

      • Libraries

      • Latest version

      • JavaScript Promises

    • XML

    • Visual Studio

    • Browser --> Debug, Error , logs


    • LWC sessions

      • Bundle

      • HTML, JS, XML

      • Lwc Tags

      • How to create LWC

      • UI Components ( LWC tags)

      • service Components

      • CSS in LWC

      • Naming Rules

      • LWC Decorators

      • LWC JavaScript

      • data binding

      • Template

    • JavaScript

    • LWC Lifecycle Hooks

    • LWC --> Apex (call APex)--> Retriving the Data

      • input Parameter

      • Collection

      • Lightning Data Service

    • Lightning Design Systems (CSS)

    • DML Operation in LWC by Apex

    • Without Apex --> Import Salesforce Object, Fields

    • Event

    • Calling LWC from Flows

    • Calling Flows from LWC

    • Real time scenarios.



  • VisualStudio setup40:18

    Step by Step VisualStudio Setup

  • HTML-11:05:37

    • HTML

    • HTML Tags

    • Web Browsers

    • First HTML Code

    • HTML Heading

    • HTML Paragraph

    • Single Quote vs Double Quote

    • Comment

    • Formatting

    • Hands-On

    • HomeWork


  • HTML-254:28

    • Formatting

    • Local Link

    • Global Link

    • HTML Images

    • Images as Link

    • Hands-On

    • Home Work

  • HTML with Inline CSS52:38

    • CSS

    • Inline CSS

    • Hands-On

  • Toggle- HTML With CSS1:07:00

    Styling HTML With CSS

  • Styling HTML With CSS54:16

    • CSS

    • Inline CSS

    • External CSS

    • CSS Fonts

    • Hands-On

    • Home Work

  • CSS- HTML Table49:51

    • Padding

    • Padding and Margin

    • Floating

    • HTML

    • HTML Tables

    • Table Header

    • Table Rows

    • Table Border Property

    • Hands-On

    • Home Work

  • HTML with CSS55:32

    • HTML With CSS

    • External CSS

    • HTML Hands-On

    • Home Work

  • JavaScript Introduction58:54

    • JavaScript

    • Varaible in JavaScripts

    • Rules for Variable Name

    • Comments in JavaScript

    • Data type in JavaScript

    • Hands-On

    • Home Work

  • Objects in JavaScript48:57

    • Objects in JavaScript

    • Hands-On

    • Home Work

  • Objects in JavaScript1:05:52

    • Symbol

    • TypeOf Operator

    • Type Coercion

    • Equality Comparison

    • Hands-On

    • HomeWork

  • Objects in JavaScripts21:53

    • Operators

    • Arithmetic Operator

    • Comparison Operator

    • Logical Operator

    • Assignment Operator

    • Ternary Operator

    • Conditional Statements

    • Hands-On

    • Home Work

  • Variables in JavaScript43:07

    • var, let, const

    • Arrow Function

    • Hands-On

    • Home Work

  • Arrays in JavaScript49:33

    • Topics

    • querySelect() && querySelectorAll()

    • Hands-On

    • Home Work

  • querySelector in JavaScript51:34

    • querySeclector()

    • querySelectorAll()

    • Css in JS

    • Enent

    • EventHandler

    • addEventListner()

  • Events59:17

    • Event Listener

    • Event Propagation

    • Event Bubbling

    • Custom Event

    • Hands-On

    • Home Work

  • Spread Operator_setTimeout_setInterval52:40

    • Spread Operator

    • setTimeout

    • setInterval

    • Hands-On

    • Home Work

  • JavaScript Promise28:00

    • Promise

    • Hands-On

    • Home Work

  • LWC Introduction49:10

    • LWC Introduction

    • Aura vs LWC

    • LWC History

    • LWC Component Bundle

  • LWC_First_Program1:15:33

    • LWC Component Bundle

    • Decorators

    • LWC JavaScript

    • Hands-On

    • Home Work

  • LWC_Checkbox_Program37:30

    • LWC_Checkbox_Program

    • Hands-On

    • Home Work

  • LWC_Greater_Program59:10

    • LWC_Greater_Program

    • Hands-On

    • Home Work

  • LWC querySelector-querySelectorAll56:06

    • Query In JavaScript

    • QuerySelector

    • Hands-On

    • Home Work

  • LWC-Array47:32

    • LWC-Array

    • Hands-On

    • Home Work

  • LWC-Object-Create Contact44:48

    • LWC –Object (JSON)

    • LWC – Create Contact

    • Hands-On

    • Home Work

  • LWC LDS38:27

    • LWC -LDS (lightning Data system)

    • LDS view form

    • Hands-On

    • Home Work

  • LWC LDS Edit Form17:47

    • LWC LDS Edit Form

    • Hands-On

    • Home Work

  • LWC Wire51:05

    • LWC - Wire

    • LWC –Wire Service Use

    • LWC –Wire Service Syntax

    • LWC - Importing Wire Adaptor

    • LWC - Wire Decorator

    • LWC - Events


  • LWC -Wire and Debugging1:09:06

    • LWC -Wire

    • LWC –Importing Wire adaptor

    • LWC –Wire Decorators

    • Debugging

    • Hands-On

    • Home Work

  • LWC LDS Edit Form1:24:43

    • LWC Toast

    • Hands-On

    • Home Work

  • LWC LDS record form33:59

    • Lightning-record-form

    • Hands-On

    • Home Work

  • LWC-create-record1:11:40

    • LWC-create-record

    • Hands-On

    • Home Work

  • LWC-Hooks37:28

    • LWC HOOKS(Life Cycle)

    • Lifecycle hooks in LWC

    • Program execution in LWC

    • Hands-On

    • Home Work

  • LWC Communications47:51

    • LWC Communication

    • Parent to Child Communication

    • Child TO Parent Communication

    • Hands-On

    • Home Work

  • LWC ConnectedCallback1:29:00

    • LWC ConnectedCallback

    • Hands-On

    • Home Work

  • LWC–Events58:42

    • LWC –Events

    • LWC –handle Event Declaratively

    • Hands-On

    • Home Work

  • LWC - bubble_Capture1:00:46

    • Propagation of Component Event

    • Bubble Phase

    • Capture Phase

    • Bubble and Capture Phase

    • Hands-On

    • Home Work

  • LWC - Publish-subscribe45:40

    • Pubsub structure

    • Pubsub

    • RegisterLisner()

    • unregisterListener()

    • FireEvent()

    • Hands-On

    • Home Work

  • LWC- Lightning Messaging service1:10:32

    • Lightning Messaging service

    • Hands-On

  • Lightning Locker In LWC11:33

    • Lightning Locker

    • Lightning Locker - Advantages

    • Lightning Locker - Disadvantages

  • LWC -Flow1:17:21

    • Invoking flow from LWC

    • Hands-On

  • Flow-LWC44:39

    • Invoking LWC from flow

    • Hands-On

  • 44.Calculator52:12

    • Calculator Hands-On

Requirements

  • Require Salesforce Administration and Salesforce Developer Knowledge

Description

This course is meticulously crafted for those eager to master Salesforce Integration with various APIs, with a special focus on Lightning Web Components (LWC). Before diving into LWC, you'll brush up on essential web development skills like HTML, CSS, JavaScript, and XML. JavaScript, being the backbone of LWC, will cover key concepts such as Data Types, Variables, Arrays, Objects, and modern features like JavaScript Promises.

The course also introduces Visual Studio as the development environment, along with the Web Stack (ECMA Script) and browser tools for debugging and logging.

In the LWC sessions, you'll learn to create LWC bundles, combining HTML, JavaScript, and XML into powerful components. The course covers everything from LWC Tags and UI Components to advanced topics like Service Components, CSS in LWC, and LWC Decorators. You’ll explore Data Binding, LWC Lifecycle Hooks, and how to connect LWC to Apex for data retrieval.

Moreover, you’ll learn to implement Lightning Data Service, use Lightning Design Systems, and perform DML Operations through Apex in LWC. The course also covers real-world applications, including calling LWC from Flows.


This course is going to cover


  • HTML

  • CSS (Styles)

  • Scripts

  • JavaScript

  • XML

  • Visual Studio

  • Web stack (ECMA Script), TC39

  • Browser --> Debug, Error , logs

  • LWC Bundle (HTML, JS, XML)

  • LWC Tags

  • LWC tags

  • CSS in LWC

  • LWC Decorators

  • LWC JavaScript

  • LWC Lifecycle Hooks

  • LWC --> Apex (call APex)

  • Lightning Data Service

  • Lightning Design Systems (CSS)

  • Wire Decorator

  • Event

  • Calling LWC from Flows

  • Calling Flows from LWC

  • Real time scenarios

Who this course is for:

  • Salesforce Developers, Salesforce Architects

Report abuse