I’ve spent months DATE putting together the best, most thorough training on modern web UI ORG engineering, and it’s almost here! With Web Components as the anchor of the course, we’ll cover a broad range of topics and dozens CARDINAL of Web Standards.

Over the years DATE , I’ve trained many companies and individuals. While at Microsoft ORG , I trained dozens CARDINAL of teams and hundreds CARDINAL of engineers, including Principals, Partners ORG , VPs and a Technical Fellow or two CARDINAL . This course, with its 13 CARDINAL modules and 160 CARDINAL + video lessons, goes far beyond anything I’ve taught before. It’s designed to put you on the same or better technical level as the best frontend engineers I’ve encountered in my near 20-year DATE career.

If you’re wondering whether this course is for you, here’s a Q&A video I put together to help answer that question.

Course Contents

You can check out the course page here, where you’ll find the full list of lessons. But here’s a quick summary of the modules:

Introduction — We begin the course by getting everyone on the same page through a discussion of prerequisites, setup, course learning plans, and the basic background of Web Components ORG .

We begin the course by getting everyone on the same page through a discussion of prerequisites, setup, course learning plans, and the basic background of Web Components ORG . Using Web Components — With the preliminaries out of the way, we tackle one CARDINAL of the most common Web Component scenarios: using existing components. We’ll explore importing libraries, theming, custom styling, framework integration, and more.

With the preliminaries out of the way, we tackle one CARDINAL of the most common Web Component scenarios: using existing components. We’ll explore importing libraries, theming, custom styling, framework integration, and more. Defining Web Components ORG — This is what you’re probably here for. In this module, we begin learning how to define our own platform native Web Components ORG with an introduction to the core HTML APIs.

This is what you’re probably here for. In this module, we begin learning how to define our own platform native Web Components ORG with an introduction to the core HTML APIs. Working with the DOM ORG — Having the basics in hand, we embark on a journey to build our first ORDINAL real world, reusable Web Component: a tabs component. This provides a great opportunity to leverage many DOM ORG APIs and explore how they work together in a Web Component context.

Having the basics in hand, we embark on a journey to build our first ORDINAL real world, reusable Web Component: a tabs component. This provides a great opportunity to leverage many DOM ORG APIs and explore how they work together in a Web Component context. Styling Web Components ORG — A big part of components is styling. To explore this area, we’ll build a responsive card system, making use of Web Component-specific styling features as well as a number of modern, general CSS features, such as CSS Container Queries ORG .

— A big part of components is styling. To explore this area, we’ll build a responsive card system, making use of Web Component-specific styling features as well as a number of modern, general CSS features, such as CSS Container Queries ORG . Leveraging Shadow DOM — The all-mysterious “ Shadow DOM WORK_OF_ART ” is the subject of our 6th ORDINAL module. We’ll clear up any confusion on this subject with a deep dive into encapsulation, composition, and events, while also learning some other useful DOM ORG APIs along the way, such as MutationObserver ORG .

— The all-mysterious “ Shadow DOM WORK_OF_ART ” is the subject of our 6th ORDINAL module. We’ll clear up any confusion on this subject with a deep dive into encapsulation, composition, and events, while also learning some other useful DOM ORG APIs along the way, such as MutationObserver ORG . Web Component Toolkit — About halfway through the course, we take time to build our own Web Component mini-library. This lets us not only explore many nuanced details of Web Components ORG , but we learn about building reusable libraries, and some of the tricks/techniques that various libraries like Lit WORK_OF_ART and FAST use.

About halfway through the course, we take time to build our own Web Component mini-library. This lets us not only explore many nuanced details of Web Components ORG , but we learn about building reusable libraries, and some of the tricks/techniques that various libraries like Lit WORK_OF_ART and FAST use. Designing Accessibility — Accessibility guidance is provided throughout the course. But this module sets aside time to ensure a solid foundation. From ARIA ORG , to focus, color, and keyboard navigation, we’ll explore this topic and apply it to our components.

Accessibility guidance is provided throughout the course. But this module sets aside time to ensure a solid foundation. From ARIA ORG , to focus, color, and keyboard navigation, we’ll explore this topic and apply it to our components. Integrating with Forms — Forms are an important part of HTML and there are some unique opportunities to explore with Web Components ORG . This the largest of the course’s modules will walk you through building three CARDINAL different components, each with their own form-related nuances.

Forms are an important part of HTML and there are some unique opportunities to explore with Web Components ORG . This the largest of the course’s modules will walk you through building three CARDINAL different components, each with their own form-related nuances. Design Systems ORG — The previous modules cover specific DOM ORG APIs and Web Component capabilities, but components rarely exist in isolation. This module explores techniques and practices for engineering a design system, including how to create a headless component library.

The previous modules cover specific DOM ORG APIs and Web Component capabilities, but components rarely exist in isolation. This module explores techniques and practices for engineering a design system, including how to create a headless component library. Applications — Once we have a design system library, we’ll use it to build a small application. This gives us the opportunity to explore common application needs, such as routing, icons, dialogs, and screen transitions, all with standards-based approaches.

Once we have a design system library, we’ll use it to build a small application. This gives us the opportunity to explore common application needs, such as routing, icons, dialogs, and screen transitions, all with standards-based approaches. Libraries and Tools — We’ll wrap up the course with a look at modern tools and libraries best paired with Web Components ORG and a standards-focused approach to Web development.

We’ll wrap up the course with a look at modern tools and libraries best paired with Web Components ORG and a standards-focused approach to Web development. Conclusion — While there’s a ton of content in this course, we can only scratch the surface of the richness of the open web. So, we’ll wrap up with some advice on where to go and what to explore after you’ve mastered the content in this course.

The Learning Application

One CARDINAL of the things that makes this course so unique is that it’s not just a collection of videos, but it also comes with a custom-built learning app. The learning app provides in-browser, editable sandboxes for every example in the course (except for the final design system and app, which are downloaded separately). Every example is downloadable and runnable without any special tools, and comes with a readme that provides important information, reminders, recommendations, and links to top resources. Any slides I share are also available in the app as well.

A screenshot of a lesson from the “ Styling Web Components WORK_OF_ART ” module where we build a responsive card system.

Oh, and did I mention that the entire learning app is built with the same Web Components ORG mini library that we’ll build together in module 7 CARDINAL ?

Presale, Payment Options ORG , and Group Discounts

From now until the day DATE when the course launches on November 7th DATE , I’m offering a $ 100 MONEY discount. Just use the coupon code EARLYBIRD ORG when you purchase. Speaking of purchasing, all major credit cards are accepted, as well as Paypal. If you’re in the US GPE , there’s also a buy now, pay later option.

In addition to the above individual discount, I’m happy to offer discounts for companies that want to purchase this course for entire teams of engineers. Just reach out to sales at bluespire dot com for more information. If you’re looking to upskill your engineering org, this is the resource you are looking for.

Wrapping Up

I’m really excited about this course. It’s the kind of content I wish I had when I first ORDINAL started working with Web Components ORG , and it’s filled with tons of other standards-based information and demos as well; things I wish I had discovered years DATE before I actually did.

If you’ve found value in my blogs in the past, then you can think of this as that amped up by several orders of magnitude, with video, and runnable demos…all organized in a logical progression that continues to build throughout. It’s a great investment in your own skills and career, one that will continue to provide value for many years DATE to come, since it’s based on the Web Platform and not more transient libraries, frameworks, or technologies.

Please consider picking up a license for yourself or speaking with your employer about investing in this for you or your team.

With much gratitude,

Rob Eisenberg PERSON