Updated April 9, 2021
Best Web Components Courses 2021
Best Web Components Tutorials 2021
Web Components & Stencil.js – Build Custom HTML Elements
Let’s face it: there are thousands of HTML tags to choose from, but some are really useful (
What if you could create your own HTML tags?
Web components are a combination of various specifications built into the browser. Getting started with these features is a snap, and you can quickly create your own powerful, reusable custom HTML elements (even in all projects!).
However, these custom elements do not replace Angular, React, or Vue – instead, you can easily use them in ANY web project, including projects using such frameworks and libraries.
In this course, you will learn this from scratch.
But we will not stop there. If getting started is simple enough, more complex components will be more difficult to create. Stencil.js is a tool that makes it much easier to create such native web components using modern features like TypeScript and JSX (don’t you know? No worries, you’ll learn that in the course!).
In detail, in this course you will learn:
how to create lightweight, reusable custom HTML elements with native browser features
how to create web components of all complexities – from a simple tooltip to modals or side drawers
how to pass data to your own web components and use it there
how to use the DOM Shadow to extend 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 provided by Stencil.js to create native web components more efficiently
NO knowledge of TypeScript or JSX is required
Build lightning fast web components apps for any framework
Many budding developers and even experienced frontend developers tend to get hooked on complex dependencies and configuration requirements just to start writing web apps. Not with this course. The first coding chapter uses no libraries at all, and the rest of the course uses standard, easy-to-use templates that you can get started with.
This course introduces a new standard called web components, which allows us to write reusable and framework independent components without the need for tools or libraries. You’ll be able to build your own blazing-fast web component-based apps or create unique drag-and-drop components into your existing projects, whatever framework you use.
Web components work with Angular, React, Vue, and many other out-of-the-box frameworks.
This course goes far beyond the basics of web components by teaching real-world best practices for effectively building web applications. Whether you are a beginner or already have some web development experience, I made sure to complement the course with my years of experience creating products the right way. Topics include:
Basics of web components:
The theory and concept behind web components and the four parts of the specification
How to define custom elements and manage the lifecycle of a component
Managing state and rendering in the shadow DOM
Different concepts on how component communication can be handled
Introduction to new CSS pseudo selectors for web components such as: host or :: slotted
Create your first application with the technologies mentioned above
Automated real-world testing via ESLint & Karma
Application of ESLint screw lint
Prettier configuration for automatic code formatting
Unit and integration tests via Karma
Configuring Istanbul for Code Coverage Reports
Configure CircleCI for continuous integration, so tests run every time you push to your repository
Configure Slack Notifications for Failed and Corrected Tests
Adding CI badges to your deposits to highlight the status of your tests
After completing this course, you will have a solid foundation in the fundamentals of the Web Components Standard and be confident enough to build production-quality applications powered by Web Components.