Web Components & Stencil.js - Build Custom HTML Elements (Udemy.com)
A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS
Created by: Academind by Maximilian Schwarzmüller
Last updated November 2023
What you will learn
- Build your own re-usable HTML elements that you can use in your own projects or share with other developers
- Overcome the limitations of the built-in HTML elements with the power of HTML, CSS and JavaScript only
How it compares
Against the other 239 rated Udemy courses in JavaScript on CourseDuck:
- Rating4.6 out of 5higher than 70% of them
- Reviews3,974#38 of 240 by number of reviews
- Length8.8 hourslonger than 67% of them
- Last updatedNovember 2023more recently than 51% of them
Course Description
Let's face it: You got hundreds of HTML tags to choose from but some really helpful ones (<tabs>, <side-drawer>, <modal>, ...) are missing.
What if you could build your own HTML tags?
Without frameworks like Angular, libraries like React or expert JavaScript knowledge in general. Just with a magic, native-JavaScript feature called "Web Components" (or "custom HTML elements").
Web Components are a combination of various specifications that are baked into the browser. Getting started with these features is a breeze and you'll quickly be able to build your own powerful and re-usable (even across projects!) custom HTML elements.
Such custom elements don't replace Angular, React or Vue though - instead you can easily use them in ANY web project, including projects using such frameworks and libraries.
In this course, you'll learn this from scratch.
But we won't stop there. Whilst getting started is fairly easy, more complex components will be more difficult to create. Stencil.js is a tool that makes the creation of such native web components much easier by using modern features like TypeScript and JSX (don't know that? No worries, you'll learn it in the course!).
In detail, in this course you will learn:
how to build re-usable, lightweight custom HTML elements with native browser features
how to build web components of all complexities - from a simple tooltip to modals or side drawers
how to pass data into your own web components and use it there
how to emit your own custom events which you can listen to in JavaScript
how to use the Shadow DOM to scope your CSS styles to your custom elements
how to use Stencil.js to get a much easier development workflow
how to use the many features Stencil.js provides to build native web components way more efficiently
how to deploy/ re-use your own web components in ANY project using ANY JavaScript framework like Angular, React or Vue (or none at all!)
Prerequisites:
Basic JavaScript knowledge is a must-have
ES6 JavaScript knowledge (const, let, classes, ...) is strongly recommended but not strictly required - a brief refresher is provided as part of the course
NO JavaScript framework knowledge (e.g. Angular, React, Vue) is required
NO TypeScript or JSX knowledge is required
Let's dive into this exciting technology together!
Instructor Details
- 4.6 Rating
3,974 Reviews
Academind by Maximilian Schwarzmüller
Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education.
Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.
We've taught more than 3,000,000 students on a broad variety of topics. We'd love to teach you as well! :)
Keep learning!
More courses by Academind by Maximilian Schwarzmüller
React - The Complete Guide (incl. Next.js, Redux) (2026)
4.6 (242,065 Reviews)
Provider: Udemy
Time: 71.4h
$199.99
NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno) (2026)
4.6 (55,533 Reviews)
Provider: Udemy
Time: 40.5h
$174.99
Docker & Kubernetes: The Practical Guide (2026)
4.7 (38,168 Reviews)
Provider: Udemy
Time: 23.7h
$22.99
JavaScript - The Complete Guide (Beginner + Advanced) (2026)
4.6 (33,592 Reviews)
Provider: Udemy
Time: 52.5h
$19.99
More JavaScript courses
The Modern Javascript Bootcamp Course (2026)
4.9 (13,238 Reviews)
Provider: Udemy
Time: 51.9h
$24.99
JavaScript: Understanding Advanced ES Next (ES6 and Beyond) (2025)
4.9 (1,076 Reviews)
Provider: Udemy
Time: 3.5h
$79.99
Reviews
By Raymond Hawthorne on 4/27/2022
Good course overall. I liked building VanillaJS web components (even though there is a lot of code to write within the components to keep the attributes and properties synced up). Some of the content is becoming outdated but the author has done nice job updating the critical parts. I'm not entirely sure StencilJS will be for me. TypeScript got in the way of my learning Stencil, and there is no option to take Stencil without TS. It's likely I'll either write VanillaJS components (if the component is small enough) or learn LitElement (which doesn't require the use of TypeScript).
By Benoit M on 9/13/2021
One of the greatest strengths of stencil is the ability to unit test your code and this course completely omits the subject. The instructor passes lots of time doing css while repeating that he has a course on css... At lest one chapter should be on code unit testing in stencil.
By Ayubi Kokayi on 6/11/2021
I learned quite a bit, not just about stencil but about modern js development as a whole. There were concepts I couldnt grasp for a long time (Decorators, State, Prop) that I finally understand and feel confident implementing. This is definitely a foundational level course. After completing this course it will require a lot of independent practice to get to the point of building design systems or apps with stencil
By Anonymized User on 1/5/2021
This course is truly excellent. I give it 4.5 instead of the full 5 stars because the content is a little bit dated (Stencil.JS methods, options and standards have moved past what you see here - but this is still _excellent_ as a guided tour!), it doesn't cover any testing, and it doesn't introduce the CLI generator. I would recommend this course to EVERYONE who works with web components.
By Nitu Jha on 12/27/2020
good
By Negin Marandi on 12/20/2020
I wish if you were doing all these stylings and JS logic in their related separate file but not in the index.html
In the real world, it is not a proper way of doing it
By Tibor Hrsszegi on 11/27/2020
Great course, combined with the other Angular and Ionic courses from Max these are simply lifesaving
By Jrg Friedland on 11/24/2020
Very good explained.
By Ahmet Keeci on 11/19/2020
It is very informative and thanks to narrator.
By Emilio Martinez on 11/15/2020
bien explicado
By Gnanakannan Rajagopal on 11/15/2020
clear in explanation
By Thomas Schubert on 11/14/2020
Gut strukturierter Kurs - deutlich mehr Inhalt als ich erwartet habe. Schn stufenweise aufgebaut - erst ein bisl Wiederholung zu JavaScript und Ecmascript, dann pure Vanilla Webcomponents und dann alles mit Stencil. Da konnte man gleich auch mit sehen wieviel Arbeit einem Stencil abnimmt.
Vielen Dank fr diesen tollen Kurs.
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 92 / 100











