Announcing the Web Component Engineering Course Presale!
I’m really excited to share that my Web Component Engineering course is now available for pre-purchase with the release coming on November 7th! And if you purchase within the next month, you can get it for $100 less!
About the Web Component Engineering Course
I’ve spent months putting together the best, most thorough training on modern web UI 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 of Web Standards.
Over the years, I’ve trained many companies and individuals. While at Microsoft, I trained dozens of teams and hundreds of engineers, including Principals, Partners, VPs and a Technical Fellow or two. This course, with its 13 modules and 160+ 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 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.
- Using Web Components — With the preliminaries out of the way, we tackle one 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 — This is what you’re probably here for. In this module, we begin learning how to define our own platform native Web Components with an introduction to the core HTML APIs.
- Working with the DOM — Having the basics in hand, we embark on a journey to build our first real world, reusable Web Component: a tabs component. This provides a great opportunity to leverage many DOM APIs and explore how they work together in a Web Component context.
- Styling Web Components — 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.
- Leveraging Shadow DOM — The all-mysterious “Shadow DOM” is the subject of our 6th 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 APIs along the way, such as MutationObserver.
- 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, but we learn about building reusable libraries, and some of the tricks/techniques that various libraries like Lit 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, 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. This the largest of the course's modules will walk you through building three different components, each with their own form-related nuances.
- Design Systems — The previous modules cover specific DOM 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.
- Libraries and Tools — We’ll wrap up the course with a look at modern tools and libraries best paired with Web Components 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 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.
Oh, and did I mention that the entire learning app is built with the same Web Components mini library that we’ll build together in module 7?
Presale, Payment Options, and Group Discounts
From now until the day when the course launches on November 7th, I’m offering a $100 discount. Just use the coupon code EARLYBIRD when you purchase. Speaking of purchasing, all major credit cards are accepted, as well as Paypal. If you’re in the US, 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 started working with Web Components, and it’s filled with tons of other standards-based information and demos as well; things I wish I had discovered years 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 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
