Announcing the Web Component Engineering Course Presale!

By admin
About

the Web Component Engineering Course
ORG

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