> ## Content Index
> Fetch the complete content index at: https://www.namastesalesforce.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Your first Lightning Web Component, line by line
- URL: https://www.namastesalesforce.com/videos/your-first-lwc-line-by-line/
- Published: 2026-01-04T09:00:00.000Z
- Updated: 2026-01-04T09:00:00.000Z
- Description: HTML template, JavaScript class, XML metadata — a working component on a record page in half an hour, every line explained.
- Author: Swarnil Singhai
- Tags: #video, LWC, #duration-35m, #Import 2026-09-03 19:13

| Time  | Chapter                               |
| ----- | ------------------------------------- |
| 00:00 | What LWC is and is not                |
| 02:50 | Scaffolding with the CLI              |
| 08:15 | The template: HTML with directives    |
| 15:30 | The class: @api, @wire, getters       |
| 24:00 | Deploying and adding to a record page |
| 30:20 | Where to go from here                 |

HTML template, JavaScript class, XML metadata — a working component on a record page in half an hour, every line explained.

## What you will see

VS Code and an org side by side. We deploy after every change so you see exactly which line caused which pixel.

## Mentioned in this video

The LWC debounce snippet, and the lwc-datatable-plus project this component eventually grew into.