Lessons
view all ⭢
lesson
Chapter One SummaryFullstack Web ComponentsYou built an autonomous custom element with Shadow DOM, HTML templates, and ES Modules. Let's reflect on that.
lesson
Styling CardComponentFullstack Web ComponentsShadow DOM provides encapsulation for styling and template. You'll style CardComponent with CSS in the context of the autonomous custom element's Shadow DOM.
lesson
Template SlotsFullstack Web ComponentsBefore you can develop the CardComponent, you'll need to scaffold the component in Storybook.
lesson
Autonomous custom elementsFullstack Web ComponentsBy developing the CardComponent, you'll get hands on experience with autonomous custom elements.
lesson
SpecificationFullstack Web ComponentsIn Part 1, you'll code a form using several Web Components specifications.
lesson
Setting Up The Development EnvironmentFullstack Web ComponentsA guide for installing various technologies needed prior to coding the exercises in this book.
lesson
Conventions Used In The BookFullstack Web ComponentsWe'll introduce you to the mockups in Figma, the development environment used throughout the book, and other conventions used in this book.
lesson
Introduction to Web ComponentsFullstack Web ComponentsA 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.
lesson
UI LibraryFullstack Web ComponentsYou'll learn best practices for developing a UI Library with Web Components by coding a micro-library, developing two custom elements with the micro-library, and figuring out how to package the UI library for distribution.
lesson
Chapter Three SummaryFullstack Web ComponentsHow customized built-in elements can make custom elements more accessible.
lesson
Making the form accessibleFullstack Web ComponentsRevist the HTML form by making the user experience more accessible.
lesson
Styling ButtonComponentFullstack Web ComponentsCustomized built-ins can't benefit from the encapsulation provided by Shadow DOM, so you'll have to find another way to style ButtonComponent.