Skip to content
UdemyJavaScriptPaid courseAll LevelsCertificate

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

icon
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

icon
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!

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

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!

icon
More courses by Academind by Maximilian Schwarzmüller

$199.99

$129.99

$174.99

$189.99

$22.99

$19.99

icon
More JavaScript courses

Free

Free

Free

$24.99

Free

$79.99

icon
Reviews

4.6

3,974 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

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.

Showing 12 of 275 reviews

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 92 / 100