Salesforce Lightning web component with live project

Name: Salesforce Lightning web component with live project
Rating: 4.7 (522 reviews)

guide to learn salesforce lightning web component Development with series of codes and a real time project

Created byDebasis Jena

Last updated 5/2024

English

English [Auto],French [Auto],

What you'll learn

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

Course content

78 sections • 214 lectures • 32h 48m total length

Introduction To Lightning Web Component/ LWC in Salesforce6:06
Explore lightning web components (LWC) in Salesforce. Compare with Visualforce and Aura, and build reusable, performant UI using HTML, JavaScript, and CSS.
Difference Between Visualforce , Aura component and LWC7:10
Compare Visualforce, Aura components, and LWC to understand how client-side rendering, mobile performance, and browser-based features shape Salesforce Lightning development.
Web Component and evolution of Webstack18:02
Explore how web components create a standard model with custom elements, templates, shadow DOM, and ES modules, and how Lightning web components boost performance and interoperability.
Why do you go for LWC instead of existing Aura Components4:56
compare lwc with aura components, highlighting better performance and standards-based development. learn about security, testing, and compatibility benefits of lwc built on web standards.
Coexistence and interoperability of AURA and LWC3:42
Explore the coexistence of aura and lwc on the same page, showing how they share the same base and underlying data services and security.

Supported Browsers for LWC3:22
Explore browser support for lwc components across Chrome, Internet Explorer, Firefox, and Safari, detailing compatibility with Lightning Experience and Lightning Community and noting typical limitations.
Supported Javascript for LWC4:05
Explore which JavaScript versions and features Lightning web components support across browsers and devices, rooted in the ECMA standards from ES6 through ES9.
Supported Experience and tools for LWC4:12
Explore the tools and experiences supported by lightning web components, including mobile and desktop experiences, lightning out, communities, visualforce, and packaging through tooling API.

What are the things need to setup for LWC?2:07
Learn how to set up a complete development environment for lightning web components for a live project, including sign up, domain enablement, debugging tools, and cli workflows.
Lets Sign up for salesforce Account (if does not have)4:16
Sign up for a Salesforce account, obtain a lifetime free developer edition, and configure login details, including email, password, security questions, and domain enablement.
Enable My Domain in Your Development Org14:48
Enable My Domain in your development org to customize the login page and branding, configure authentication and logging policies, and support single sign-on for Lightning components.
Enable Debug Mode in Your Development Org6:22
Enable debug mode in your development org to easily read and debug JavaScript code within lightning components by selectively enabling it for developers or sandbox users.
Install Visual studio code11:40
Install Visual Studio Code to develop lightning web components for Salesforce, and learn to download, install, and configure the editor for debugging and IntelliSense.
Install Salesforce Extension pack12:00
Install the Salesforce extension pack from the marketplace to enable Salesforce development in Visual Studio Code and explore lightning components.
Install Salesforce CLI11:59
Install and configure the Salesforce CLI to streamline development and build automation, set environment paths, and integrate with Visual Studio Code and Salesforce extensions.

Setup main org as Devhub14:08
Set up the main org as devhub and configure scratch orgs to emulate different environments, then authorize and manage them with the Salesforce CLI and VS Code.
Create Project and Scratch org in Visual Studio code15:09
Create a project and scratch org in Visual Studio Code, using disposable scratch orgs to develop, configure, and test Salesforce data alongside sandboxes.

Understand basic of HTML template , Javascript and LWC configuration file22:20
Learn to create a lightning web component using an HTML template, a JavaScript file, and a metadata configuration, including the template master tag and exposure targets.
Expose our first LWC in Lightning Record Page8:42
Expose your first Lightning web component on a Lightning Record Page and see its placement on accounts and opportunities. Activate it and assign access via profiles.
Code for Meta file to expose component in a record page0:10

Different mechanism to style your lightning web component10:44
Explore styling lightning web components with standard syntax, the lightning design system, or per component css files, respecting naming rules and the rule that a parent cannot style its children.
Style your Lightning Web Component using Custom CSS (style file)21:08
Build and style a Salesforce Lightning web component with a custom CSS style file, then activate it on a Lightning page using the Lightning App Builder to view the styling.
Add CSS File and style code in our component23:00
Learn to add a CSS file and apply custom styling to a Lightning web component, using CSS attributes, classes, and background colors to improve look and feel.
Sample Code for Custom style sheet for your Lightning web component0:32
Style your Lightning Web Component using SLDS styling29:40
Learn to style a lightning web component using the Salesforce SLDS, applying prebuilt classes to tables and UI elements with inline options.
Sample Code -Style your Lightning Web Component using SLDS styling0:30
Share CSS Styles Among LWC13:16
Create a single CSS library to share styling across multiple lightning web components, then import that library into each component to apply consistent branding and rules.
Sample Code - Share CSS Styles Among LWC0:13

Javascript Fields, Properties and Attributes24:16
Learn to bind data dynamically in a Salesforce lightning web component using JavaScript fields, properties, and attributes, and distinguish public and private properties and reactive versus non-reactive behavior.
Use Private Properties in your component to bind dynamic data28:52
Learn how to use private and public properties in a lightning web component to bind dynamic input data, handle change events, and compute a running total with arithmetic operations.
Sample code for Private properties in LWC0:28

Requirements

basic knowledge of salesforce, javascript
Basic understanding of Salesforce Apex and SOQL is preferred
More important to have interest to learn salesforce lightning web component

Description

Lightning web component (LWC) is a new programming model with following web standards to develop salesforce lightning components and this is the only tutorial with maximum hour of video with real time project. Each session explained with many live coding to make your LWC concepts deep clear so that you can make your journey to be expert in LWC.

All code are also added in the tutorial for your reference and we are updating this with each new feature monthly wise.

LWC is still new in the market and learning LWC can make you a Salesforce gem and can give your resume another dimension.

This course is designed from basic to expertise level. if you are beginner , nothing to worry, its very easy and well organized course to make your learning simple and smooth. Also for expert, you can learn deep knowledge of LWC and add many more skills in your professional career with live real-time examples and scenarios with series of codes.

There is one complete real time project added in the end of session which covers all lwc concepts and how to implement it. Every session delivered with examples and code which is shared in the session already .

Who this course is for:

salesforce
Developer
Administrator
software professional
tester
Project Managers

Salesforce Lightning web component with live project

What you'll learn

Explore related topics

Course content

Introduction to Lightning web component5 lectures • 40min

Supported browsers , javascript, experience and tools for salesforce LWC3 lectures • 12min

Set up development environment for lightning web component7 lectures • 1hr 3min

Set up DEVHub and Scratch Org in salesforce2 lectures • 29min

How to create a new Lightning web component and its folder structure2 lectures • 17min

Understand basic of HTML template , Javascript and LWC configuration file3 lectures • 31min

Define styling to lightning web component8 lectures • 1hr 39min

Bonus Lecture1 lecture • 1min

Javascript properties in Lightning web component3 lectures • 54min

Use of conditional rendering using template if else2 lectures • 9min

Requirements

Description

Who this course is for: