Zero to Hero in Lightning Web Components

Zero to Hero in Lightning Web Components

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 35.5 Hours | 15.9 GB

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

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 Required to mastery 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

The course will mainly focus on Lightning Web Component development. We will take real-time problem statement and example 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 standard, building ECMAScript modules and developing UI components.

What you’ll 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
Table of Contents

Introduction
1 Introduction
2 Course Outline
3 Fundamentals of Web Technology
4 Tools for Web Development

HTML & CSS
5 Basics of HTML
6 Basics of CSS

JavaScript for LWC
7 JavaScript Learning Path
8 Variables
9 Data Types
10 null vs undefined
11 Spread Operator
12 Destructuring
13 String interpolation
14 String Methods
15 Object JSON Operations
16 Array Methods
17 Promise
18 Modules import and export
19 QuerySelector
20 Events
21 Arrow Function
22 setTimeout vs setInterval

Lightning Web Component and Setup
23 Intro to Lightning Web Components
24 Setting Up Developer org
25 Setting Up Salesforce DX Environment
26 Setting Up My Domain and Dev Hub
27 Setting up Project and Scratch Org

Fundamentals of LWC
28 Create Your First Component in LWC
29 Component Folder Structure
30 Different Naming Conventions Available in LWC
31 App Creation and Component Deployment
32 Local Properties and Data Binding
33 Methods And Two way Data Binding
34 @track properties
35 Getters in LWC
36 Conditional Rendering
37 Template Looping

First Project – Quiz App
38 QUIZ APP

Composition and Query Selectors
39 Component Composition
40 Shadow DOM
41 Accessing Elements in the Component
42 index

Styling in LWC
43 Inline and External CSS
44 Lightning Design System
45 SLDS design token
46 Shared CSS
47 Dynamic CSS
48 Styling across shadow DOM

Component Lifecycle Hooks
49 Introduction to lifecycle Hooks
50 Lifecycle Hooks in Mounting Phase
51 Lifecycle Hooks in Unmounting Phase
52 Lifecycle Hooks in Error Phase
53 Render Method

Components Communication
54 Intro to Components Communication
55 Parent to Child Communication Approaches
56 Parent To Child Communication using primitive Data type
57 Parent To Child Communication using non-primitive Data type
58 Parent To Child Communication on action at parent component
59 Calling Child Method from Parent component
60 Child to Parent Communication Approaches
61 Child to Parent Communication Using Simple Event
62 Child to Parent Communication Using Event with Data
63 Child to Parent Communication Using Event Bubbling
64 Pubsub Module

Setter, Slots and CSS behaviour in parent child component
65 Setter Method
66 Passing Markup Using Slots
67 CSS behaviour in parent child component

Building Reusable Component
68 Building Reusable Component

Aura Coexistence
69 Aura Coexistence

Communication between Visualforce pages, Aura components, and LWC
70 Lightning Messaging Service
71 LWC to LWC Communication using LMS
72 LWC TO AURA Communication using LMS
73 LWC, AURA and VisualForce Page Communication using LMS

Salesforce Resources, Component Context and Notification
74 Introduction
75 Images from Static Resources
76 Third Party JavaScript Libraries in LWC
77 Using Third Party CSS Library
78 Content Asset Files
79 Internationalization
80 Access Labels
81 Check Permissions
82 Access Client Form Factor
83 Get Information About the Current User
84 Fetch Record Id and Object Name
85 Toast Notification

Memory Game Project
86 Memory Game

Navigation Service
87 Intro to Navigation Service
88 Navigate To Home
89 Navigate To Chatter
90 Navigate To New Record
91 Navigate To New Record With Default Values
92 Navigate To List View
93 Navigate To Files
94 Navigate To Record Page in View and Edit Mode
95 Navigate To Tab
96 Navigate To Record Relationship Page
97 Navigate To External Web Page
98 Navigate To LWC Page
99 Navigate To AURA Component
100 Navigate To Visualforce page
101 Fetch Current Page Reference

Base lightning components
102 Introduction to Work With Data In LWC
103 Lightning Data Service
104 Base Lightning Components
105 lightning-record-form
106 lightning-record-view-form
107 lightning-record-edit-form
108 Reset the lightning-record-edit-form
109 Edit the lightning-record-edit-form
110 Adding Custom Label to the Fields in Lightning-record-edit-form
111 Custom Validation in lightning-record-edit-form

Lightning Data Service Wire Adapters and Functions
112 Introduction
113 @wire service and fetch user details
114 How @wire is reactive
115 getObjectInfo adapter
116 getObjectInfos adapter
117 getPicklistValues adapter
118 getPicklistValuesByRecordType adapter
119 getRecord adapter
120 getFieldValue & getFieldDisplayValue functions
121 getListUi adapter
122 getNavItems adapter
123 getRecordUi adapter
124 createRecord function
125 updateRecord Function
126 deleteRecord Function

Apex in LWC
127 Introduction
128 Expose Apex Methods to LWC
129 Import Apex Methods
130 Wire Apex Method
131 Wire Apex Method with Parameters
132 Call Apex Methods Imperatively
133 Apex Imperative Method with Parameters

Books Listing App With Rest API Callout
134 Books Listing App

Component Configuration in LWC
135 Meta Configuration in LWC
136 LWC in Utility Bar
137 LWC in Lightning Tab

Real Time Features
138 PDF Generation in LWC
139 Charts in LWC
140 Maps in LWC
141 Filtering in LWC
142 Sorting in LWC
143 Reusable Modal Component in LWC
144 Date Validation
145 CSV Generation in LWC
146 Custom Carousel Using LWC

Car Hub Project
147 Introduction
148 Project Setup
149 Car Hub App Creation
150 Car Object Creation
151 Adding Custom Fields to Car Object
152 Adding Static resources and Creating Car records
153 Custom Page Template Design
154 Component Creation and Placement
155 Filter Section Designing
156 Fetching Cars from Apex to carListItem
157 Creating Car Tiles
158 getCars Method with filter logic
159 LMS implementation And Filtering
160 Designing Car Card Component
161 Passing recordId from carTile to carCard
162 Placeholder Component
163 Navigate to record Page from car Card Component
164 Similar Cars Component
165 Summary
166 What’s More Coming to the Course in future

Job Website using LWC OSS and Heroku
167 Introduction
168 Project Setup
169 Navbar component creation
170 Bootstrap Library Setup
171 Search Box Component
172 Calling Job API
173 Job Card Component
174 Utility Creation
175 Job Description Component
176 View Detail Button
177 Apply Now Button
178 Back to Jobs From Description
179 Real-time job search
180 Heroku Deployment
181 Known Issues

Salesforce JavaScript 1 Certification Preparation
182 Salesforce JavaScript 1 Certification Videos list

Homepage