Lessons
view all ⭢
lesson
HeaderFullstack Web ComponentsYou'll code a global header with autonomous custom elements named AppHeader.
lesson
Landing PageFullstack Web ComponentsYou'll scaffold the landing page with an autonomous custom element named MainView.
lesson
Application Development with Custom ElementsFullstack Web ComponentsYou'll provide a separation of concerns with custom elements in a single page application.
lesson
ApplicationFullstack Web ComponentsYou'll integrate the UI library with a single-page application and code the end-to-end user experience with custom elements.
lesson
Chapter Seven SummaryFullstack Web ComponentsLet's reflect on the best practices you learned for distributing UI libraries filled with Web Components.
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.