Salesforce LWC for Beginners: Build Lightning Web Components

Install the Salesforce CLI to connect to your org, deploy code, retrieve data, and automate tasks. Verify installation, and add the bin folder to your path with Visual Studio Code.

Install Visual Studio Code from code.visualstudio.com on Windows or Mac, then install the Salesforce Extension Pack to enable deploying and writing code across components, apex, and Visual force.

Connect VS Code to your Salesforce org using the Salesforce extension pack and manifest-based project, select metadata to sync, and set a default org for lightning web components.

Create your first lightning web component in visual studio code with the create command, generating hello world HTML, JS, and XML, then deploy and expose it on the home page.

Explore the folder structure of a lightning web component by examining the html, js, and xml files, and learn how the component is exposed, targets enable reusability across Salesforce pages.

Master two-way data binding by wiring a JavaScript message property to a lightning input and updating it with an onchange handler, so the UI and code stay in sync.

Demonstrate one-way data binding by updating the HTML from JavaScript using a hello Salesforce message. Click the button to change the message to message updated, illustrating the one-way data flow.

Explain one-way binding where data flows from JavaScript to HTML, and two-way binding where user input can update JavaScript via on change, highlighting when to use each.

Explore how getter and setter methods control data flow in lightning web components by transforming user input to uppercase in real time, using a simple name input example.

Explore lifecycle hooks in lightning web components, from constructor setup to connected, rendered, and disconnected callbacks, and learn how to initialize data, handle errors, optimize performance, and clean up resources.

Explore the @track decorator, which watches for changes inside objects and arrays to trigger instant UI updates. Bind input to person.name and observe how updates propagate through the UI.

Master the @api decorator in Lightning Web Components, making a property public for parent-to-child data transfer. Learn how a person object updates reactively via creating a new object.

Explore how the wire decorator connects Salesforce data to a Lightning web component, enabling reactive, error-handled fetching of contact records via an Apex method and conditional UI rendering.

Use the wire decorator with iterators in lwc to render a dynamic contact list inside a lightning card, with conditional messaging when no contacts exist.

Create an opportunity dashboard by combining components to build an opportunity search table with filters, display results in a table, and show financial metrics for open, won, and lost amounts.

Build a real-time opportunity search dashboard in lwc by querying open opportunities with a search term, using an apex controller, lightning design system, and a responsive three-region layout.

Enhance the lwc opportunity dashboard by adding two buttons to mark opportunities as won or lost, wired to apex updates with toast messages and refresh apex.

Build a Salesforce LWC component for the opportunity dashboard data table to show open, won, and lost totals in currency for the current fiscal year using Apex methods.

Add a refresh button to the opportunity dashboard to dynamically re-fetch open, won, and lost opportunity data with refresh apex, via HTML and JavaScript changes.

Build a parent-to-child communication system in LWC by passing employee details to a child component and keeping the UI reactive with the track decorator while calculating tax and annual salary.

Build a dynamic account search and detail viewer with lightning web components and debouncing, linking a parent account list to a child detail panel and fetching related contacts via Apex.

Learn how a parent component calls a child component method in Salesforce LWC to dynamically change the child's text color using public methods and css classes.

Learn child to parent communication in lwc by dispatching a custom event from a task priority selector to the parent, which updates the task and shows a toast.

Master child to parent communication with event bubbling in lightning web components, contrasting it with simple event communication, and implement bubbling using a custom priority change event.

Explore the publisher-subscriber pattern in lightning web components, using a reusable pub-sub utility to enable cross-sibling communication with page-scoped events and clean listener management.

Make the amounts clickable to show a detailed interactive data table, and use a parent-to-child communication with an Apex data fetch to load opportunities by type.

Explore lightning data service and its declarative approach that simplifies data access, reduces apex code, boosts performance, and auto handles locking, security, and sharing with a client-side cache.

Explore the Lightning Record Edit Form within the LDS framework, showing how it handles view and edit modes, data loading, security, and DML operations for account records without custom Apex.

Learn to use lightning record edit and view forms to display data with field level security and read-only output fields, and leverage minimal code components for editing or creating records.

Learn to fetch a Salesforce account name using the getRecord adapter in a dynamic LWC, extract the name with getFieldValue, and render it in a Lightning record view.

Learn to create Salesforce records from a Lightning web component using createRecord, building a contact form with first name, last name, and email, plus error handling and toast notifications.

Learn to update Salesforce records dynamically using the updateRecord function in Lightning Web Components, binding inputs like contact ID, first name, last name, and email, with toast feedback.