Step 1: Install Google Chrome

You will use Chrome for testing and debugging your LWC components.

Download:

Go to Google Chrome → Download → Install.

Step 2: Install Visual Studio Code (VS Code)

VS Code is the recommended code editor for Salesforce development.

How to Install:

1. Visit the VS Code official website.
2. Download the version for your OS (Windows/Mac/Linux).
3. Install normally and open VS Code.

Important Extensions for LWC:

• Salesforce Extension Pack
• Lightning Web Components
• Prettier – Code Formatter
• ESLint

Step 3: Install Node.js (Required for Salesforce CLI)

Node.js helps Salesforce CLI run properly.

Check if Node is already installed:

 node -v 

Download:

Go to nodejs.org → Download LTS version → Install.

Step 4: Install Salesforce CLI (SFDX CLI)

Salesforce CLI is required to create projects, authorize orgs, deploy LWCs, and run commands.

Download:

Visit developer.salesforce.com → Download Salesforce CLI → Install.

Check successful installation:

 sfdx --version 

Step 5: Install Git (Optional but recommended)

Git helps with version control and teamwork.

To check if Git is installed:

 git --version 

If not installed:

Visit git-scm.com → Download → Install.

Step 6: Create a Salesforce Developer Org

You need a Salesforce Developer Org to test and deploy your LWC components.

Steps:

1. Go to developer.salesforce.com/signup
2. Enter your details
3. Verify your email
4. Login → Setup → Enable Dev Hub

Step 7: Connect VS Code to Salesforce Org

Now you will connect VS Code with your Salesforce org using Salesforce CLI.

Step 1 — Create an SFDX Project:

 sfdx force:project:create -n lwcPractice 

Step 2 — Open the Project in VS Code

File → Open Folder → select the created project.

Step 3 — Authorize an Org:

 sfdx force:auth:web:login -a DevOrg 

A browser will open → Login to your Salesforce Developer Org → Success.

Step 8: Create Your First LWC Component

Use the following command:

 sfdx force:lightning:component:create 

\ -n helloWorld \ -d force-app/main/default/lwc 

Component Structure:

Step 9: Deploy LWC to Salesforce Org

Deploy the entire project:

 sfdx force:source:deploy -p force-app 

Deploy specific LWC:

 sfdx force:source:deploy -p force-app/main/default/lwc/helloWorld 

Step 10: Add LWC to Lightning App Builder

Steps:

1. Go to Salesforce org
2. Setup → Lightning App Builder
3. Create a new page or open existing one
4. Search for your component (helloWorld)
5. Drag and drop on the page
6. Save & Activate

Troubleshooting Common Errors

1. Salesforce CLI not recognized

 Add SFDX CLI to system PATH or reinstall CLI 

2. Org not connecting

• Check internet connection
• Try `sfdx force:auth:web:login -r https://login.salesforce.com`

3. Project not deploying

• Check component metadata file
• Check API version
• Make sure Dev Hub is enabled

Why is CSS Important for LWC?

• Controls how LWC components look
• Improves UI/UX
• Helps follow Salesforce Lightning design standards
• Ensures components match brand identity
• Makes layouts responsive on multiple screens

How CSS Works

CSS is written using rulesets:

 selector {     property: value; } 

 Example:

 p {     color: green;     font-size: 18px; } 

CSS Selectors

1. Element Selector

 p { color: blue; }

2. Class Selector

 .message { font-size: 20px; } 

3. ID Selector

 #header { background: yellow; } 

4. Attribute Selector

 input[type="text"] {     border: 1px solid black; } 

Common CSS Properties

1. Colors

 h1 { color: #ff5722; } 

2. Background

 div { background-color: lightgray; } 

3. Fonts

 p {     font-size: 18px;     font-family: Arial; } 

4. Margin & Padding

 .box {     margin: 20px;     padding: 10px; } 

5. Borders

 .card {     border: 1px solid black;     border-radius: 8px; } 

CSS Box Model (Very Important!)

Every HTML element is treated like a box with:

• Content
• Padding
• Border
• Margin

Example:

 .box {     padding: 20px;     border: 2px solid #000;     margin: 10px; }

Display Property

Block Elements

 div { display: block; } 

Inline Elements

 span { display: inline; } 

Inline-Block

 img { display: inline-block; } 

Flexbox (Most Used in LWC Layouts)

 .container {     display: flex;     justify-content: center; 

    align-items: center; } 

Common Flexbox properties include:

• display: flex
• justify-content
• align-items
• flex-direction
• gap
• 
  

Grid Layout

 .grid {     display: grid;     grid-template-columns: 1fr 1fr;     gap: 20px; } 

Responsive CSS with Media Queries

 @media (max-width: 600px) {     h1 {         font-size: 20px;     } } 

CSS in Lightning Web Components

In LWC, each component has its own CSS file with the same name:

myComponent.html myComponent.js myComponent.css 

Example:

HTML:

      
Hello Peoplewoo
  

CSS:

 .title {     color: blue;     font-size: 22px; } 

Using: host in LWC

Used to style the root element of a component.

 :host {     display: block;     padding: 20px; } 

Best Practices

• Use classes instead of IDs
• Follow naming conventions
• Keep CSS modular
• Use Flexbox for modern layouts
• Avoid !important (unless needed)

Why HTML Is Important for LWC

LWC uses HTML to define the UI. Everything you see on an LWC page—labels, layouts, buttons, forms—is built using an HTML template.

In LWC:

• Each component has a .html template file
• HTML tags are used to display data
• HTML attributes help link JS and LWC features
• Conditional rendering uses HTML directives
• Loops render lists through template syntax

 <template>     <h1>{greeting}</h1>     <button>Click Me</button> </template> 

Basic Structure of an HTML Document

 <!DOCTYPE html> <html> <head>     <title>My First Page</title> </head> <body> 

    <h1>Hello World!</h1> </body> </html> 

This structure is similar to how LWC templates are built (without <html>, <head>, <body> tags).

HTML Tags Every LWC Developer Should Know

1. Heading Tags (<h1> to <h6>)

 <h1>Main Heading</h1> <h2>Sub Heading</h2> 

2. Paragraph Tag

 <p>This is a paragraph.</p> 

3. Anchor Tag (Links)

 <a href="https://peoplewooskills.com">Visit Us</a> 

4. Image Tag

 <img src="logo.png" alt="Peoplewoo Skills Logo"> 

5. Button Tag

 <button>Click Me</button> 

6. Div & Span

 <div>Block element</div> <span>Inline text</span> 

Lists in HTML

Ordered List

 <ol>     <li>HTML</li>     <li>CSS</li> </ol> 

Unordered List

 <ul>     <li>Salesforce</li>     <li>LWC</li> </ul> 

HTML Attributes

Attributes provide extra information to elements.

 <img src="image.jpg" width="200" height="200"> 

Common Attributes

• id
• class
• style
• src
• href

Forms in HTML

Forms are important in LWC for handling user input.

 <form>     <label>Name:</label>     <input type="text" name="username">  

   <button type="submit">Submit</button> </form> 

HTML Tables

 <table border="1">     <tr>         <th>Name</th>         <th>Age</th>   

  </tr>     <tr>         <td>Amit</td>         <td>25</td>     </tr> </table> 

Semantic HTML (Very Important for LWC)

Semantic tags make HTML meaningful and help with SEO and accessibility.

Common Semantic Tags

• <header>
• <nav>
• <section>
• <article>
• <footer>

HTML in LWC Templates

LWC templates use HTML with Salesforce-specific enhancements.

Interpolation (Displaying JS data)

 <p>Welcome, {userName}</p> 

Conditional Rendering

 <template if:true={isVisible}>     <p>This is visible</p> </template> 

Loop Rendering

 <template for:each={students} for:item="stu">  

   <p key="{stu.id}">{stu.name}</p> </template> 

Best Practices for HTML in LWC

• Use semantic HTML for clean structure
• Always use key attribute inside loops
• Do not use inline JavaScript inside HTML
• Use class for styling with CSS, not inline styles
• Keep HTML simple and accessible

Common Mistakes to Avoid

• Not closing tags properly
• Using outdated tags like <center>
• Mixing CSS and JS inside HTML
• Missing alt text for images
• Incorrect nesting of elements

What Are Events in JavaScript?

An event is an action or occurrence recognized by the browser, such as:

• User actions (click, input, keypress)
• Browser actions (load, scroll, resize)
• Programmatic actions (CustomEvent dispatch)

Events allow JavaScript to “react” to what is happening on the web page.

Why Events Are Important?

• They make web pages interactive
• Help capture user actions
• Drive component communication (like LWC)
• Trigger business logic
• Control UI updates efficiently

Types of Events in JavaScript

1. Mouse Events

• click
• dblclick
• mousedown
• mouseup
• mousemove
• mouseenter / mouseleave

 button.addEventListener("click", () =>

 {     console.log("Button clicked!"); });

2. Keyboard Events

• keydown
• keypress
• keyup

 document.addEventListener("keydown", (event) => 

{     console.log("Key pressed:", event.key); }); 

3. Input & Form Events

• input
• change
• submit
• focus / blur

4. Clipboard Events

• copy
• cut
• paste

5. Window Events

• load
• resize
• scroll
• beforeunload

6. Touch Events (Mobile)

• touchstart
• touchmove
• touchend

7. Custom Events

Manually created events using CustomEvent (commonly used in LWC).

The Event Listener

Syntax

 element.addEventListener("eventName", callbackFunction); 

Example

 document.querySelector("#btn").addEventListener("click", handleClick);

 function handleClick() {     console.log("Clicked!"); } 

Removing Event Listeners

 function hello() {     console.log("Hello!"); } 

button.addEventListener("mouseover", hello); 

button.removeEventListener("mouseover", hello); 

Important: removeEventListener only works if you pass the same function reference.

Event Listener Options

 window.addEventListener("scroll", logScroll,

 {     passive: true,     once: false,     capture: false }); 

The Event Object

Every event automatically receives an event object with powerful properties.

 document.addEventListener("click", (event) =>

 {     console.log(event.target);     console.log(event.type); });

Common Properties

• event.target → element on which event occurred
• event.currentTarget → element with the listener
• event.preventDefault() → stop default action
• event.stopPropagation() → stop bubbling
• event.key (keyboard)
• event.which (mouse buttons)

Event Propagation

When an event occurs, it moves through three phases:

     CAPTURING → TARGET → BUBBLING 

1. Capturing Phase

 Event moves from top → down (window → element).

2. Target Phase

Event reaches the actual element.

3. Bubbling Phase

Event moves from down → top (element → window).

Most events bubble by default.

 parent.addEventListener("click", () => console.log("Parent"), true); 

// capturing child.addEventListener("click", () => console.log("Child")); 

// bubbling 

stopPropagation() vs stopImmediatePropagation()

 event.stopPropagation();  // stops bubbling or capturing beyond this element 

 event.stopImmediatePropagation(); // stops all other listeners on same element too 

Event Delegation

Event delegation is a technique where you attach one event listener to a parent instead of each child element.

Diagram

 Parent  ┗━ Child 1  ┗━ Child 2  ┗━ Child 3 

Example: Todo list click handler

 document.querySelector("#list").addEventListener("click", (event) =>

 { if(event.target.tagName === "LI") { console.log("Item clicked:",

 event.target.textContent); } }); 

This is used heavily in dynamic UIs (including LWC DOM rendering).

Advanced JavaScript Event

Concepts

Event Loop

The event loop manages:

• Call stack
• Microtask queue
• Macrotask queue

Example

 console.log("Start"); setTimeout(() => console.log("Timeout"), 

0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); 

Execution order:

 Start End Promise Timeout 

Debouncing (Improving Performance)

Used when user types — prevents too many function calls.

 function debounce(fn, delay) {     let timer;     

return function(...args) {         clearTimeout(timer);  

       timer = setTimeout(() => fn.apply(this, args), delay);  

   }; } const searchHandler = debounce(() => 

{     console.log("Searching..."); }, 500); 

Throttling

Controls how often a function executes during continuous actions like scrolling.

 function throttle(fn, limit) {     let waiting = false;  

   return function(...args) {         if (!waiting) 

{             fn.apply(this, args);             waiting = true;  

           setTimeout(() => waiting = false, limit);         } 

    }; } window.addEventListener("scroll", throttle(() => 

{     console.log("Scrolling..."); }, 300)); 

Custom Events in JavaScript

 const event = new CustomEvent("helloEvent", 

{     detail: { message: "Hello Peoplewoo!" },   

  bubbles: true,     composed: true }); element.dispatchEvent(event); 

Real-Life Project Examples

1. Search Bar with Debouncing
2. Modal Open/Close Events
3. Form Validation on Input Events
4. Infinite Scroll using Scroll Event
5. Apex Call Triggered by Button Click in LWC

Interview Questions

Beginner

• What is an event in JavaScript?
• Difference between target and currentTarget?
• What is event bubbling?

Intermediate

• Explain event delegation with example.
• What is the difference between preventDefault and stopPropagation?

Advanced (LWC + JS)

• How does event propagation work inside Shadow DOM?
• When should composed: true be used in LWC?
• Explain microtask queue vs macrotask queue.

How JavaScript Stores Arrays (Internal Working)

JavaScript arrays are not traditional arrays like C/C++. Internally, arrays in JS behave more like dynamic hash maps:

• Index → Key
• Value → Stored Against Key
• Resizable → Automatically increases size

This makes JavaScript arrays extremely powerful and easy to use, but it also means:

• They may not be the fastest for heavy numeric operations
• Indexes don’t always represent continuous memory blocks
• Performance varies depending on usage pattern

Creating Arrays

1. Array Literal (Most Common)

 const fruits = ["Apple", "Banana", "Mango"]; 

2. Using the Array Constructor

 const numbers = new Array(10, 20, 30); 

3. Empty Array + Adding Later

 const list = []; list.push("Peoplewoo Skills"); 

4. Mixed Data Types

 const mixed = [1, "Amit", true, { role: "Developer" }, [1, 2, 3]]; 

Accessing Elements & Indexing

 const colors = ["Red", "Green", "Blue"]; console.log(colors[0]); 

// Red console.log(colors[2]); // Blue 

Length Property

 console.log(colors.length); // 3 

Last Element

 console.log(colors[colors.length - 1]); 

Mutating vs Non-Mutating Array Methods

Important for LWC: Avoid mutating arrays directly because it may not trigger UI updates. Use non-mutating patterns or assign new arrays.

Most Important Array Methods (Detailed Explanation)

1. push() – Add to end (Mutates)

 const items = [1, 2]; items.push(3); // [1, 2, 3] 

2. pop() – Remove from end

 items.pop(); 

3. unshift() — Add to start

 items.unshift(0); // [0,1,2] 

4. shift() — Remove from start

 items.shift(); 

High-Level Functional Array Methods

map() — Transform each element

 const doubled = [1,2,3].map(num => num * 2); console.log(doubled); // [2,4,6]

filter() — Keep only matching items

 const filtered = [1,2,3,4].filter(num => num % 2 === 0); // [2,4] 

find() — Return first matching element

 const found = [10,20,30].find(x => x > 15);  // 20 

every() — Check if all match

 [2,4,6].every(x => x % 2 === 0); // true 

some() — Check if at least one matches

 [1,3,5,6].some(x => x % 2 === 0); // true 

findIndex() — Return index of first match

 [10,20,30].findIndex(x => x === 20); // 1 

reduce() — The Most Powerful Method

Reduce converts an entire array into a single value: number, object, string, or new array.

Example: Sum

 const sum = [1,2,3].reduce((acc, curr) => acc + curr, 0); // 6 

Example: Count Occurrences

 const names = ["Amit", "Amit", "Suraj"];

 const count = names.reduce((acc, name) =>

 {     acc[name] = (acc[name] || 0) + 1;   

  return acc; }, {}); 

Sorting Arrays

Default Sorting (Alphabetical)

 ["Banana", "Apple"].sort(); 

Numeric Sorting

 [10,5,100].sort((a,b) => a-b); 

Sorting Objects

 const contacts = [   {name:"Amit", age: 30}, 

  {name:"Suraj", age:25} ]; contacts.sort((a,b) => a.age - b.age); 

Spread Operator (…) – Modern Array Power

Clone Array

 const arr = [1,2,3]; const cloned = [...arr]; 

Merge Arrays

 const all = [...arr1, ...arr2]; 

Add Items Without Mutation

 const updated = [...arr, 4]; 

Rest Operator (…) – Collect Remaining Values

 const [first, ...rest] = [1,2,3,4]; console.log(rest); // [2,3,4] 

Array Destructuring

 const [a, b] = ["LWC", "Apex"]; console.log(a); // LWC 

Skipping Values

 const [x,,y] = [10,20,30]; 

Multidimensional Arrays

 const matrix = [   [1,2],   [3,4] ]; console.log(matrix[1][0]); // 3 

Immutability in LWC — Critical Concept

Avoid mutating arrays like below:

 // Bad for LWC reactivity this.items.push("New"); 

Always use:

 // Good this.items = [...this.items, "New"]; 

Working with Arrays of Objects

Updating an object inside an array

 this.contacts = this.contacts.map(contact =>

     contact.Id === selectedId         ? { ...contact, status: "Updated" } 

        : contact ); 

Removing an item

 this.contacts = this.contacts.filter(c => c.Id !== selectedId); 

Performance Tips for Arrays

• Use map() and filter() instead of loops whenever possible
• Prefer spread operator over JSON cloning
• Avoid sort() repeatedly — it mutates
• Use find() instead of filtering entire array when only one match is needed
• Avoid deeply nested arrays (hard to debug)
• Use for loops only for performance-sensitive tasks

Best Practices Summary

• Use const for arrays to avoid accidental reassignment
• Prefer immutable patterns in LWC
• Use map, filter, reduce instead of writing manual loops
• Avoid using splice() directly (mutates)
• Use for:each with key attributes like Id
• Always clone arrays before modifying them