Master Vanilla Web Components: Build Reusable UI Like a Pro
Focused View
2:09:49
1. Course Overview.mp4
01:35
1. Introduction to Web Components.mp4
05:34
2. What Are Native DOM Elements.mp4
02:44
3. Custom Elements API and Lifecycle Callback Methods.mp4
03:44
4. Extending Custom Elements.mp4
02:31
5. Extending Native Elements.mp4
03:25
6. Using the Shadow DOM.mp4
03:41
7. Using HTML Templates.mp4
03:19
8. Using HTML Imports.mp4
03:59
1. Introduction.mp4
01:02
2. Method 1 - Pure JavaScript.mp4
03:25
3. Method 2 - HTML Import.mp4
04:45
4. Custom Element Best Practices.mp4
05:02
5. Web Component Attributes.mp4
03:29
6. Web Component Properties.mp4
04:09
7. Web Component Shadow DOM.mp4
02:09
8. Web Component Skeleton.mp4
01:22
1. Introduction.mp4
03:16
2. The Number Input.mp4
02:52
3. Creating the Foundation of the Star Rating Web Component.mp4
03:33
4. Implementing the Disabled Mode.mp4
02:04
5. Adding a Value Property.mp4
01:40
6. Allowing a User Selection.mp4
01:55
7. Handling the Value Attribute.mp4
02:52
1. Introduction.mp4
03:00
2. Creating the Foundation of the Slide out Menu Web Component.mp4
02:45
3. Styling the -host.mp4
02:17
4. Adding Themes to the Slide out Menu Component.mp4
01:23
5. Allowing the Menu to Be Opened and Closed.mp4
04:12
6. Allowing Users to Provide Component Content with Slotting.mp4
08:19
1. An Introduction to CSS Custom Properties.mp4
04:07
2. Adding a Styling API to the Star Rating Web Component.mp4
03:04
3. Adding a Styling API to the Slide out Menu Web Component.mp4
04:28
4. An Introduction to the CSS @apply Rule.mp4
04:10
1. Browser Support for the Web Component Specifications.mp4
03:25
2. Transpiling the Star Rating Web Component.mp4
02:02
3. An Introduction to the Polyfills.mp4
04:54
4. Adding the Polyfills to the Star Rating Web Component Project.mp4
01:52
5. Using the ShadyCSS Polyfill.mp4
05:44
More details
Course Overview
This comprehensive course teaches you how to create encapsulated, reusable UI components using vanilla Web Components that work across any front-end framework. Learn the core specifications through hands-on projects and best practices.
What You'll Learn
- Web Component fundamentals and core specifications
- Custom Elements API and Shadow DOM techniques
- How to build production-ready components like Star Ratings and Slide-out Menus
Who This Is For
- Front-end developers wanting framework-agnostic solutions
- Web engineers seeking better component encapsulation
- UI specialists looking to create reusable design systems
Key Benefits
- Create components that work with any technology stack
- Learn through practical projects with real-world applications
- Master browser compatibility and polyfill implementation
Curriculum Highlights
- Web Component Fundamentals
- The Anatomy of Web Components
- Building a Star Rating Component
Focused display
Category
- language english
- Training sessions 39
- duration 2:09:49
- level average
- English subtitles has
- Release Date 2025/06/02
