Save for later

Web Components & Stencil.js - Build Custom HTML Elements

Let's face it: You got thousands 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.

Get Details and Enroll Now

OpenCourser is an affiliate partner of Udemy and may earn a commission when you buy through our links.

Get a Reminder

Send to:
Rating 4.7 based on 197 ratings
Length 9 total hours
Starts On Demand (Start anytime)
Cost $14
From Udemy
Instructors Maximilian Schwarzmüller, Academind by Maximilian Schwarzmüller
Download Videos Only via the Udemy mobile app
Language English
Tags Web Development Development

Get a Reminder

Send to:

Similar Courses

What people are saying

web components

The technology of web components in my opinion is very interesting and definitely a skill that can come in handy anytime for a web developer.

A big highlight for me was the section on how to use your web components on different frontend frameworks (angular, react, vue).

Very useful for me to build my school projects with web components.

:) As always, Maximilian gives a full training with very useful examples and information, every detail is very well explained and updated (you don't have to buy a training for each version of the released api as other guys do on udemy) I totally recommend this training if you want to understand web components without any basic knowledge about them Great course by MAX !

Thanks for presenting web components so comprehensive and in a clear understandable manner!

This was a great course to understand the basics of web components from the beginning to the very end, it was lightweight and easy to follow up.

I have none previous knowledge regardings web components ( I have been coding for 1 1/2 year, medium level ), and this is a great approach to learn about native we components, and very well introduction to stencil.

Totally awesome, really love this one.. simple easy and powerfull Great explanations provided for all examples I always thought I was pretty well-versed on javascript but I was pleasantly surprised to find out that web components with shadow dom is actually a native thing.

I'm an experienced developer but I didn't know anything about web components when I started this course Maximilian is an amazing teacher!

This course brings Web Components to life an opens up many possiiblities.

Max next course: How to develop your own platform This course is really descriptive and I feel that understanding the web components fundamentals is crucial to knowing how tools such as React and Angular work behind the scenes with their built in components.

Great introduction to Web Components and Stencil It's been a ton of information on web components, excited to see how it transitions to the StencilJS framework.

Best possible way anybody could have explained web components.

Web Components make life easier.

Read more

course from max

Just an other perfect course from Max and AcadeMind.

maybe you can add one project to integrated with another framework like chatbot maybe Another perfectly arranged course from Max.

Nice to learn, would like to see to complete this course One more excellent course from Maximilian, as usually!

Another great course from Max.

Again a great course from Max here on Udemy.

Yet another great course from Max.

This is an excellent course from Maximilian Schwarzmüller.

Another great course from Max!

Another 5 star course from Max.

Read more

as always

A good introduction to the topic, with clear explanations (as always with Max's courses).

As always a fantastic course.

As always Max delivers high quality teaching through good examples accompanied by thorough explanations of how it works.

as always, we have a great teacher.... Great!

Brilliant, Max, as always Es muy pronto para valorar very clearly explained!

I was not disappointed as always.

Fantastic, as always.

- excellent as always Max is a great teacher.

Read more

easy to understand

Good content explained in a way that is easy to understand.

I highly recommend this cource to anyone interesting in learning about Web Components and Stencil.js :) It was great learning Max always presents the material in a details and easy to understand way.

por enquanto sim Very easy to understand, I like it.

He shows the full path from scratch to working components and explains in a clear and easy to understand matter.

Concise, easy to understand, strait to the point, concrete stuff.

Read more

very well

I must say this course is the best and it serves it's purpose very well.

Thank you, this was super useful and very well done!

Max is a great teacher, he explains things very well from beginning to end.

All details are told very well, in understandable manner.

Read more

well explained

Well explained as well as perfect speed (not too slow not too fast).

Done many of Max's courses and they are very thorough and well explained.

A great course, interesting examples, well explained, engaging...

It is my 4th course with Maximilian and as always, it is well explained and easy to follow.

Read more

another great

Another great course from a great instructor.

Another great course by Max thoroughly enjoyed, covered all the key concepts Max is a great instructor he takes you in an easy to follow way and very well organized.

max 's courses

Careers

An overview of related careers and their average salaries in the US. Bars indicate income percentile.

Components Rapid Response Engineer $62k

Project Engineer (Electronic Components) $82k

Buyer / Engine & APU Components $85k

Components Research Engineer $93k

Product Design Engineer Aftermarket Components $100k

Parts / Components Engineer $104k

Product Manager, Thomson ONE Components $108k

Plant Controller - Gastonia Components & Logistics $121k

Global Product Manager - Engine Components $122k

SAP Solutions Architect (Chemical Components) $145k

Transformer Components Sales Manager $159k

Common Components Product Manager $171k

Write a review

Your opinion matters. Tell us what you think.

Rating 4.7 based on 197 ratings
Length 9 total hours
Starts On Demand (Start anytime)
Cost $14
From Udemy
Instructors Maximilian Schwarzmüller, Academind by Maximilian Schwarzmüller
Download Videos Only via the Udemy mobile app
Language English
Tags Web Development Development

Similar Courses

Sorted by relevance

Like this course?

Here's what to do next:

  • Save this course for later
  • Get more details from the course provider
  • Enroll in this course
Enroll Now