Lessons
view all ⭢
lesson
Continuous IntegrationFullstack Web ComponentsYou'll learn how to setup continuous integration for the UI library with Github Actions.
lesson
DocumentationFullstack Web ComponentsCustom Elements Manifest provides a wealth of information about each component. After generating a manifest, it will provide documentation for each component in Storybook.
lesson
DistributionFullstack Web ComponentsYou'll learn brest practices for distributing Web Components by formatting the code with named exports, configuring the build with Rollup, providing a standard package format, and writing a custom Node.js script that enables you to publish packages.
lesson
UI LibrariesFullstack Web ComponentsYou'll learn best practices for organizing and distributing Web Component UI libraries.
lesson
Chapter Six SummaryFullstack Web ComponentsSummarizing the work completed in DialogComponent, ModalComponent, TooltipComponent, and DialogStack.
lesson
DialogStackFullstack Web ComponentsYou'll control the ordering and event cycle of dialogs with a custom class named DialogStack.
lesson
Querying DOM Across Shadow BoundariesFullstack Web ComponentsYou'll fix an issue faced in the last section by learning how to query for elements across Shadow boundaries.
lesson
Modal and TooltipFullstack Web ComponentsYou'll scaffold two custom elements that leverage DialogComponent to display modals and tooltips.
lesson
DialogComponentFullstack Web ComponentsYou'll make a configurable dialog with custom elements.
lesson
Mocking the Dialog in StorybookFullstack Web ComponentsYou'll mock the DialogComponent in Storybook.
lesson
HTML TemplatesFullstack Web ComponentsYou'll learn how to code a common UX pattern (dialogs) using HTML templates and custom elements.
lesson
Making the Table EditableFullstack Web ComponentsYou'll learn about how to create a separation of concerns between the many custom elements that comprise the editable table.