Lessons

lesson

Scaffold a form-associated custom element named TextInputComponent in Storybook.

Steve Belovarich

lesson

Form-associated custom elements allow custom elements to participate in HTML forms. From validation to submission, you'll code a text input end-to-end.

Steve Belovarich

lesson

You built an autonomous custom element with Shadow DOM, HTML templates, and ES Modules. Let's reflect on that.

Steve Belovarich

lesson

Shadow DOM provides encapsulation for styling and template. You'll style CardComponent with CSS in the context of the autonomous custom element's Shadow DOM.

Steve Belovarich

lesson

Before you can develop the CardComponent, you'll need to scaffold the component in Storybook.

Steve Belovarich

lesson

By developing the CardComponent, you'll get hands on experience with autonomous custom elements.

Steve Belovarich

lesson

In Part 1, you'll code a form using several Web Components specifications.

Steve Belovarich

lesson

You learned about how to create a separation of concerns between various custom elements in the same user experience flow.

Steve Belovarich

lesson

A guide for installing various technologies needed prior to coding the exercises in this book.

Steve Belovarich

lesson

We'll introduce you to the mockups in Figma, the development environment used throughout the book, and other conventions used in this book.

Steve Belovarich

lesson

A brief introduction to the set of specifications called Web Components. We'll introduce you to concepts such as Shadow DOM, HTML templates, Custom Elements v1 and uncover typical use cases for developing Web Components.

Steve Belovarich

lesson

We just completed the course! Let's see what's next and how you can use the new knowledge.

Aleksandra Sikora