Skip to main content Back CRM Cloud Mastery Sign up Create account

Lightning Web Components

LWC from the component model up: templates, composition, data, forms, security, testing and shipping.

  • Intermediate
  • 58 lessons
  • 11 modules
  • English

Designed and created by Salesforce Expert

$79
or $249 / year for all access Buy this course

What you'll learn

  • Build components from the LWC model rather than by copying samples
  • Render collections and state in a template that stays readable
  • Make components communicate by composition and events, not by accident
  • Get Salesforce data onto the screen with wires, forms and validation
  • Test, debug and ship components into a real org

Course content

11 sections · 58 lectures · 18 hands-on labs

The screen that lied 2 lectures
  1. 1.1 The Board That Lied
  2. 1.2 What a Salesforce front-end developer actually owns, where Apex Foundations stopped, and what this exam really tests
The component model 7 lectures
  1. 2.1 A Web Standard With A Salesforce Accent
  2. 2.2 The Bundle, The Metadata, And The Name That Bites
  3. 2.3H Hands-On: Netherby's First Component, And Getting It Onto A Lot Record Page Hands-on
  4. 2.4 Reactivity, And The Three Lines That Change Nothing On Screen
  5. 2.5a The Lifecycle, Part One: The Sequence, And The Two Hooks Before Anything Is Drawn
  6. 2.5b The Lifecycle, Part Two: The Hook That Runs Too Often, And Where Things Go
  7. 2.6H Hands-On: Instrument The Lifecycle On The Bidding Board And Read The Counts Hands-on
The template: rendering the catalogue 6 lectures
  1. 3.1 The Template Language, And Why It Refuses
  2. 3.2 Conditional Rendering, Iteration, And The Key That Is Not Decoration
  3. 3.3H Hands-On: Render Netherby's Lot List, With A Condition Report That Is Not Always There Hands-on
  4. 3.4 Getters: Why The Template Asks The Class A Question
  5. 3.5 Styling A Component: The Bundle's Stylesheet, The Boundary, And What The Platform Offers Instead
  6. 3.6H Hands-On: Style The Lot Card So A Rebrand Cannot Break It, And Make The Catalogue Images Behave Hands-on
Composition and events 6 lectures
  1. 4.1 Composition: A Component Made Of Components
  2. 4.2 Public Properties: The Contract A Parent Makes With A Child
  3. 4.3H Hands-On: Split The Bidding Board Into A Board, A Lot Row And A Bid Button Hands-on
  4. 4.4 Events Properly: What A Custom Event Carries, And How Far It Is Allowed To Go
  5. 4.5 Slots, And The Difference Between A Component You Configure And One You Fill
  6. 4.6H Hands-On: A Bid Travels From The Button To The Board, And Then, One Component Later, Does Not Hands-on
Getting Salesforce data onto the screen 7 lectures
  1. 5.1 Three Ways To Reach Your Own Data, And The One Question That Picks Between Them
  2. 5.2 Lightning Data Service: The Record Cache Nobody Has To Maintain
  3. 5.3H Hands-On: The Record Form And Its Two More Honest Siblings Hands-on
  4. 5.4 The Wire Service: The Adapter, The Two-Property Result, And The Mistake Everybody Makes On Their First One
  5. 5.5 Wiring Apex: What `cacheable` Is Actually Promising, And What It Costs You When The Data Moves
  6. 5.6H Hands-On: Wire The Saleroom's Lot List To Apex, Then Make It Tell The Truth Again After A Bid Lands Hands-on
  7. 5.7 Calling Apex Imperatively, and the Screen You Forgot to Design
Forms, validation and the person using them 6 lectures
  1. 6.1 The base component library: exhaust it before you write an input, and know why
  2. 6.2 Validation in three layers: what the browser does, what the base component does, and what only you can do
  3. 6.3H Hands-On: Netherby's bidder registration form, validated before it ever reaches the server Hands-on
  4. 6.4a Accessibility is not a polish pass, part one: the second copy of your page, and the two things on it with no name
  5. 6.4b Accessibility is not a polish pass, part two: focus, live regions, and the reason Marguerite cannot use your board
  6. 6.5H Hands-On: Register a bidder using the keyboard alone, then fix everything that stopped you Hands-on
Where a component lives 7 lectures
  1. 7.1 Page References, The Mixin, And The URL You Must Never Build By Hand
  2. 7.2 Targets: The Surfaces A Component Can Live On, And How Each One Configures It
  3. 7.3H Hands-On: One Component, Three Surfaces, Three Configurations Hands-on
  4. 7.4 A Component Inside A Flow Screen: Passenger Or Citizen
  5. 7.5H Hands-On: The Condition Report Nia Opens And Orla Walks Through Hands-on
  6. 7.6 Components And Agentforce: What The Surface Can Render, And What The Guide Does Not Settle
  7. 7.7 Agentforce For Developers On A Component Bundle: What It Is Good At, What It Invents
Making three components agree 4 lectures
  1. 8.1 When Events Run Out
  2. 8.2 The Channel, the Subscription and the Scope
  3. 8.3H Hands-On: The Clerk's Console, One Truth Hands-on
  4. 8.4 Talking to What Is Already There
Security on the screen 5 lectures
  1. 9.1 What the Framework Protects You From
  2. 9.2 Cross-site scripting in a component: the sinks that are still open, and the one directive that opens them
  3. 9.3 A component is not a security boundary: object and field access, user mode, and the field you forgot was on that record
  4. 9.4aH Hands-On: Attack Netherby's own lot component (part one of two) — the two holes Hands-on
  5. 9.4bH Hands-On: Attack Netherby's own lot component (part two of two) — close every hole you opened Hands-on
Testing, debugging and shipping 6 lectures
  1. 10.1 Debugging A Component: The Browser's Tools, The Framework's Own Errors, And A Stack That Crosses The Boundary
  2. 10.2H Hands-On: Find Out Why The Board Stopped Updating, Using Nothing But The Browser Hands-on
  3. 10.3 Jest For Components: What A Component Test Is Actually Asserting, And The One Assertion Worth Writing First
  4. 10.4H Hands-On: Test The Bid Button — The Event It Fires, And The Error It Renders Hands-on
  5. 10.5 Performance: What Makes A Component Slow, And The Four Things To Measure Before You Guess
  6. 10.6H Hands-On: Deploy The Console Bundle From The Command Line, And Find Out What Travels With It Hands-on
The exam, and the saleroom you now own 2 lectures
  1. 11.1 The exam run: the User Interface domain in full, the three courses that cover this credential, and where you are still weak
  2. 11.2 The saleroom you now own, and where you go next

Requirements

  • BLD-110 Apex Foundations, or equivalent programmatic experience
  • Working JavaScript, or BLD-220 alongside
  • A free Developer Edition org

Description

A screen that lies to the user is worse than no screen. This course teaches Lightning Web Components from the model outwards — how a component is actually constructed, how templates render, how composition and events let three components agree, and how Salesforce data gets onto the page without the component becoming a database client.

Forms and validation, where a component is allowed to live, security on the screen, and testing and debugging are all covered against one application you build across the course.

Who this course is for

  • Salesforce developers building UI, and web developers arriving on the platform.

Skills you'll practise

Lightning Web ComponentsJavaScriptComponent compositionLightning Data ServiceJest testingFront-end security

Related reading