Master WebComponents: Build Cross-Framework UI in 2024
Focused View
4:02:52
1 - Join the webcomponents Facebook community.mp4
02:04
2 - Google Slides Part 1.txt
2 - What are webcomponents.mp4
02:52
3 - Google Slides Part 2.txt
3 - How component systems evolved until webcomponents came along.mp4
09:14
4 - Google Slides Part 3.txt
4 - What do I get from learning webcomponents.mp4
02:38
5 - Google Slides Part 4.txt
5 - The four parts of the webcomponents spec in a nutshell.mp4
14:25
6 - Google Slides Part 5.txt
6 - When to choose webcomponents when to avoid them.mp4
03:01
7 - StackBlitz Live Coding Samples.txt
7 - Using ES Modules for importing and exporting dependencies.mp4
11:35
8 - Arrow functions to the rescue for shorter syntax and easier this references.mp4
10:34
8 - StackBlitz Live Coding Samples.txt
9 - The components were going to build before our production app.mp4
00:58
10 - Getting the course content from GitHub.mp4
01:48
10 - GitHub repository with course contents.txt
11 - Running a basic httpserver for ES modules on localhost.mp4
04:35
11 - httpserver npm package on the yarn package manager site.txt
12 - Creating a profile card that renders dynamic data on atrributeproperty change.mp4
13:44
13 - Protip When defining custom element fails dealing with version conflicts.mp4
04:52
14 - Styling our profile card with the new host pseudo selector.mp4
03:19
15 - Protip Choosing your own tag name vs letting users choose their own tag name.mp4
03:18
16 - Creating a rendering base class extending our card component with it.mp4
04:17
17 - Protip The difference between constructor connectedCallback.mp4
06:37
18 - Creating a noshadow DOM appshell that applies shared styles and theming.mp4
09:34
19 - Fetching profiles and rendering a list of profile cards onto the page.mp4
11:01
20 - Animating cards when data changes via slot change events of a parent component.mp4
10:05
21 - Dispatching and listening to events from our cards to open a dialog component.mp4
06:40
22 - Protip Working around issues with the hidden attribute to hide components.mp4
02:47
23 - Feeding data to our dialog and finishing the final layout.mp4
07:46
24 - Why it matters to create automated tests.mp4
04:40
25 - A look at the testing pyramid to understand what we will be testing.mp4
03:38
26 - Stranger Testings When tests go into the upside down.mp4
07:24
27 - Creating a testing plan for our app components.mp4
02:34
28 - Setting up linting for our app with the openwcorg recommendations.mp4
03:08
29 - Using prettier to autoformat our code.mp4
05:48
30 - Discovering and adjusting linting issues via the CLI and fixing linting errors.mp4
06:26
31 - Installing karma for unit testing and creating our first test.mp4
13:21
32 - Creating the remaining unit tests.mp4
29:20
33 - Adding the chrome binary permanently to our env vars.mp4
01:02
34 - Adjusting the acceptable threshold of our code coverage report.mp4
02:21
35 - Running automation tests automatically when pushing to GitHub via CircleCI.mp4
08:55
36 - Setting up slack notifications for failing CI tests.mp4
04:39
37 - Adding badges to our repo to reflect the status of our tests.mp4
01:52
More details
Course Overview
Learn to build lightning-fast, reusable web components that work across all modern frameworks using native browser technologies. This comprehensive course covers everything from fundamentals to real-world implementation.
What You'll Learn
- Master the WebComponents spec: Templates, Custom Elements, and Shadow DOM
- Build reusable components without any external libraries
- Implement state management and component communication
Who This Is For
- Beginner developers exploring modern frontend trends
- React/Angular/Vue developers wanting framework-agnostic solutions
- Advanced developers integrating WebComponents into existing workflows
Key Benefits
- Future-proof skills using native browser standards
- Create components that work in any framework or vanilla JS
- Includes testing, linting, and CI/CD best practices
Curriculum Highlights
- WebComponents fundamentals and evolution
- Building vanilla components from scratch
- Automated testing and production deployment
Focused display
Category
- language english
- Training sessions 37
- duration 4:02:52
- English subtitles has
- Release Date 2025/05/15
