Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
6 Hour(s) 19 Minute(s)
Language
English
Taught by
Andrew Maksimchenko
Rating
1 views
Course Overview
Master modern, isolated and framework-agnostic UI Kits using Shadow DOM, Custom Elements, Slots, Templates and beyond!
Ready to build modern, reusable, and framework-agnostic UI components that work everywhere?
This course is your ultimate hands-on guide to mastering the Web Components API — the native browser technology that lets you create high-performance, scalable frontend components with zero dependency on frameworks like React, Angular, or Vue.
Whether you’re working on a startup product, building a design system, contributing to open source, or preparing for a technical interview — Web Components are the secret weapon you need to build consistent, future-proof UIs.
What you’ll learn:
How to confidently build Shadow DOM structures to fully encapsulate your HTML, CSS, and JS
How to create, register, and manage Custom Elements with lifecycle callbacks and clean APIs
How to use HTML Templates & Slots for dynamic, flexible, and reusable component structures
How to master content projection and create multi-level slotting systems
How to develop Form-Associated Custom Elements that integrate with native forms and validation
How to connect Web Components with real-world apps across React, Angular, Vue, and Vanilla JS
How to design and architect your own UI Kits, Design Systems, and Component Libraries
How to use TypeScript with Custom Elements for type safety and IDE superpowers
How to write Unit Tests for Web Components using modern tools and test strategies
How to use Storybook to build isolated component environments and visual documentation
How to manage complex projects using Monorepos (Yarn Workspaces) and share UI components across multiple teams and projects
How to apply Accessibility (A11y) principles and make your components keyboard- and screen-reader-friendly
How to implement Localization (i18n) inside Shadow DOM and manage language-specific content
How to apply advanced styling options with CSS Modules, SASS, and CSS-in-JS (JSS)
How to architect and deploy a Micro-Frontend platform where multiple frameworks live in harmony
How to structure your components for performance, maintainability, and reusability in production
How to publish projects of any complexity to NPM & GitHub
And other countless tips, best practices, and real-world patterns you won’t find anywhere else
Whether you’re a complete beginner or a senior engineer, this course takes you from Zero to Hero, step by step.
You’ll build real-world projects, master native browser APIs, and gain practical skills used by tech leaders at Google, Meta, Amazon, and beyond.
No frameworks. No boilerplate. No lock-in.
Just pure Web Components — built to last.
Enroll now and start building UI components that run anywhere, scale everywhere, and impress everyone.
Course Content
- 9 section(s)
- 72 lecture(s)
- Section 1 Hello & Welcome Aboard!
- Section 2 Intro to Web Components
- Section 3 Diving into Shadow DOM
- Section 4 About Custom Elements
- Section 5 Mastering HTML Templates
- Section 6 World Around Slots
- Section 7 Form-Associated Elements
- Section 8 Advanced Web Components
- Section 9 Final Words. What's next?
What You’ll Learn
- Master the Web Components API from scratch and understand why it’s the future of framework-independent frontend development.
- Build production-ready & reusable UI Kits using Shadow DOM, Custom Elements, HTML Templates, and Slots with zero framework dependencies.
- Integrate Web Components into Micro-Frontend architectures to make multiple frameworks work together on a single page.
- Apply advanced tools like TypeScript, Storybook, SASS, CSS Modules, Monorepos, and Unit Testing in real Web Components projects.
- Build accessible, form-associated custom inputs with full support for validation, styling, and native form behavior.
- Encapsulate styles and behavior to avoid global CSS conflicts and JavaScript collisions in complex frontend applications.
- Create framework-agnostic UI libraries you can reuse in React, Angular, Vue, Svelte, or plain JavaScript apps.
- Gain architectural confidence to design scalable, maintainable component systems for any frontend project.
- Publish projects of any complexity to NPM & Github
Skills covered in this course
Reviews
-
MMarlon Shaw
The course is mostly lecture and the lessons are challenging to follow if you are new to Web Components. The audio is poor at times and certain videos are not completed and will abruptly end. Really wish I could get my money back on this one.
-
OOleksii Koval
Exactly what I've expected plus more! Great illustrations, concise and meaningful explanations. Excellent!
-
MMary Obiagba
I started building a huge project a while back - an SPA framework. Finding this course on Udemy and enrolling this year, has been helpful to fill in some blank spaces. The course not only explores web components, but some content about javascript development environment are included (and I loooooooove anything relating to configuring dev environment and building libraries). Andrew is a great mentor - He finds time to for his students out of busy schedule, and has also been helpful to answering questions about the course content and even topics not related to the course. As with any course, there's definitely room for improvements (which I've communicated to him) - But my experience with the course so far has been great. I'm currently in section 4 of the course. Can't wait to update this review once I'm done with this course.
-
MMax
Solid course with well-organized content. Clear explanations, good pace. Covers enough theory and practical stuff. Loving the examples in the lessons. The community support was a great bonus!
