A Practical Guide to Vanilla Web Components

Focused View

2:09:49

0 View

1. Course Overview

1. Course Overview.mp4

01:35

2. Web Component Fundamentals

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

3. The Basic Anatomy of a Web Component

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

4. Creating a Star Rating Component

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

5. Creating a Configurable Slide out Menu Component

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

6. Styling Web Components

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

7. Production Ready Web Components

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

Description

Web Components are set to change how you build front-end web applications. This course teaches you how to use the Web Components specifications to create encapsulated and reusable UI components which can be used with almost any framework or library.

What You'll Learn?

Web Components represent a new way to develop reusable UI components that solve fundamental problems web developers face every day. In this course, A Practical Guide to Vanilla Web Components, you'll learn all about the Web Component specifications. First, you'll get an overview of the fundamentals of web components. Next, you'll explore the basic anatomy of a web component. Finally, you'll be shown how to use what you've learned so far by building two high quality vanilla Web Components. By the end of the course, you'll be able to write top quality encapsulated UI components which can be used in almost any front-end technology stack.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Pluralsight

View courses Pluralsight

Pluralsight, LLC is an American privately held online education company that offers a variety of video training courses for software developers, IT administrators, and creative professionals through its website. Founded in 2004 by Aaron Skonnard, Keith Brown, Fritz Onion, and Bill Williams, the company has its headquarters in Farmington, Utah. As of July 2018, it uses more than 1,400 subject-matter experts as authors, and offers more than 7,000 courses in its catalog. Since first moving its courses online in 2007, the company has expanded, developing a full enterprise platform, and adding skills assessment modules.