- 8.5 hours on-demand video
- 20 articles
- 90 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Build your own re-usable HTML elements that you can use in your own projects or share with other developers
Welcome to the course! Let me introduce myself and give you a rough overview of this course, in this lecture.
What are "Web Components"? You understand them best, if you see them in action - so time for a quick web components + custom HTML elements demo.
We saw web components in action - what exactly are web components then? How did that demo work? Let's dive into the important theory in this lecture.
We know what Web Components and Custom HTML Elements are - why would we use them? In this lecture, I'll give you some ideas!
We got the theory out of the way - time to now understand what's in this course. Here's an overview of the course content and the order in which it is presented.
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?
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 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
NO TypeScript or JSX knowledge is required
Let's dive into this exciting technology together!
- Everyone who's interested in building custom HTML tags!
- Students who want to dive into a future-proof web technology that can be used in any web app