Zero to Hero in Lightning Web Components

Learn HTML basics, including tags, elements, and attributes, to structure web pages with div, p, h1–h6, ul, a, and img, plus block and inline concepts and data attributes.

Explore JavaScript variables, including var, let, and const, and how each declares, updates, redeclares, and scopes variables in global, function, and block contexts.

Explore the eight basic JavaScript data types—number, string, boolean, bigint, undefined, null, object, and symbol—and how typeof reveals them, including that null is reported as object.

Learn the difference between null and undefined in JavaScript, including how double equals and triple equals compare values and types, why undefined is automatic, and why null should be explicit.

Explore the spread operator (three dots) and its four common uses: expand strings into character arrays, merge arrays, merge objects, and create shallow copies, with nested-copy caveats using json stringify/parse.

Learn how to use array and object destructuring to unpack data into variables with shorthand notation, illustrated through examples in the lightning web components context.

Learn how string interpolation with backticks and ${} embeds JavaScript expressions into strings, avoiding manual concatenation and enabling dynamic urls and record ids in lightning web components.

Learn seven essential string methods in JavaScript for MWC: includes, indexOf, startsWith, slice, toLowerCase, toUpperCase, and trim, with practical in-code examples.

Demonstrate object and json operations in lightning web components, focusing on object.keys, object.values, json.stringify, and json.parse for data transfer to Apex.

Explore essential JavaScript array methods and learn how to transform data with map, filter, reduce, every, some, sort, and forEach for Lightning Web Components.

Explore how promises represent asynchronous operations in JavaScript, covering pending, fulfilled, and rejected states, and using then, catch, and finally to handle results from server calls or static resources.

Explore how to export and import modules in JavaScript and MWC, including named exports, default exports, aliasing, and star imports, to create reusable functions across files.

Learn to use querySelector and querySelectorAll to fetch single or multiple elements with CSS selectors like element, ID, and class, understand node lists vs arrays, and apply styling with JavaScript.

Explore browser events, including event handlers and listeners, with on keyword use, addEventListener, and removeEventListener; learn event propagation through bubbling and capturing and create custom events with dispatchEvent and detail.

Explore ES6 arrow functions: concise syntax, when to use braces, how this binding works, and apply them in maps and object methods, including setTimeout and setInterval.

Learn how setTimeout and setInterval, both window object methods, control delayed and repeated function execution with a delay in milliseconds, and how to clear timeouts and intervals for debouncing.

Discover how Lightning Web Components leverage modern web standards like shadow dom, modules, and ES6 to deliver high performance, security, and interoperability with Aura.

Set up your Salesforce developer org to practice lightning web components by signing up, filling the form with name and email, verifying the account, and logging into the lightning experience.

Set up the Salesforce DX environment with Visual Studio Code, Salesforce CLI, and the Salesforce extension pack, then verify installation in the VS Code integrated terminal and review plugin features.

Set up my domain to give your developer org a meaningful, secure url. Enable the dev hub to create and manage scratch orgs from the command line.

Set up a Salesforce project in VS Code, create a scratch org via the force CLI or command palette, and authorize it to a dev hub.

Learn to create your first lightning web component and follow naming conventions—lowercase start, alphanumeric or underscore, and unique namespace—using terminal commands or the VS Code palette.

Explore the component folder structure for Lightning Web Components, including default HTML, JavaScript, and meta configuration files, and learn how to add CSS, SVG, extra JS, and test files.

Explore camel case, pascal case, and kebab case naming conventions in LWC, with practical examples of component names, class names, and HTML attributes for Salesforce.

Create a lightning app, build an app page, deploy a hello world component, and place it on the page using scratch org, VS Code, and sfdx force:source:push commands.

Master local properties and one-way data binding in lightning web components, connecting a JavaScript controller to an HTML template using curly brackets and dot notation for objects.

Learn to define and call methods in a Lightning web component, and implement two-way data binding by updating a property from user input.

Learn how to use the @track decorator to observe changes inside objects and arrays in lightning web components, decorating fields to track nested properties and keep the UI in sync.

Explore conditional rendering in Lightning web components using if true and if false directives within template tags, controlling visibility with properties, getters, and click events.

Explore template looping in lightning web components, using for each and iterator directives within template tags, with arrays, keys, and first/last cues for dynamic HTML lists.

Create a quiz app in Lightning Web Components, render questions with for each and if true, use radio inputs, and implement form submit, reset, and score display.

Master component composition by embedding a child component into a parent, using kebab-case naming in the c- namespace, and building complex apps from small, testable, reusable building blocks.

Explore how shadow DOM encapsulates children in lightning web components, isolating the shadow root from the parent and blocking CSS, DOM queries, and event propagation across the boundary.

Learn to access and manipulate elements within a Lightning web component using template.querySelector and template.querySelectorAll, retrieving innerText, applying styles, setting attributes, and rendering children with the dom manual directive.

Learn how to style a lightning web component with inline styling and external CSS, using elements, classes, and pseudo-classes, and explore design system tokens and CSS best practices.

Explore how the Salesforce Lightning Design System provides utility classes for building consistent user interfaces, including boxes, padding, margins, grids, and cards, all without extra css.

Discover how the lightning design system uses design tokens to style components, selecting color, background, text, border, and font tokens via CSS variables for global access and internal access.

This lecture explains how to share styling across lightning web components by creating a shared css library, moving common classes into a shared component, and importing it into individual components.

Learn dynamic CSS in Lightning web components by using a getter to compute a width percentage from user input and apply it to a red alert bar.

Explore applying css across shadow dom in lightning web components, using a render callback style injection, its performance costs, and when to use it as a last resort.

Master the lightning web component lifecycle by examining mounting, unmounting, and error phases and methods such as constructor, connectedCallback, render, renderCallback, and disconnectedCallback.

Master the error phase lifecycle hook in Lightning web components, using the error callback to catch errors from child components and inspect the error and stack arguments.

Learn how the render method in lightning web components conditionally loads one of multiple HTML templates based on user actions, enabling clean separation of templates and dynamic UI updates.

Explore component communication in lightning web components, covering parent to child, child to parent, pub-sub for siblings, and the lightning messaging service for cross-component messaging across wc and visualforce.

Explore four parent-to-child communication approaches in Lightning Web Components: pass primitive data, pass complex data, pass data on a parent action, and call child methods from the parent.

Discover parent to child communication in lightning web components by exposing public properties with the API decorator, using kebab-case attributes, and reactive primitive data.

Pass non primitive data from a parent to a child in Lightning web components by using a public property to send an array of objects to the carousal.

Master parent to child communication on action in Lightning web components by passing input data to a child progress bar via a public api property.

Learn to call a public child method from a parent in Lightning web components using @api, and reset a slider to 50 via a parent reference.

Explore three child to parent communication approaches in lightning web components: calling the parent with a simple event, with data, and event bubbling through a configuration change.

Master child-to-parent communication in lightning web components by using simple custom events, creating and dispatching a custom event, and listening in the parent.

Learn how to pass data from child to parent in lightning web components using an event with data and the detail property; the parent reads event.detail to display a message.

Explore child to parent communication in lightning web components using event bubbling. Learn how the bubbles property enables upward event flow, while compost is discouraged.

Explore pubsub, a JavaScript standard pattern for inter-component communication in Lightning web components. Publish, subscribe, and unsubscribe using a shared store, demonstrated with two components exchanging messages.