Skip to content

Learn Web Components 2024 – Best Web Components Courses & Best Web Components Tutorials

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?

Without frameworks like Angular, libraries like React or expert knowledge of JavaScript in general. Simply with a magical native JavaScript feature called “Web Components” (or “Custom HTML Elements”).

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 emit your own custom events that you can listen to in JavaScript

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

how to deploy / reuse your own web components in ANY project using ANY JavaScript framework like Angular, React or Vue (or none at all!)

Preconditions:

Basic knowledge of JavaScript is essential

Knowledge of JavaScript ES6 (const, let, classes, …) is strongly recommended but not strictly required – a brief reminder is provided as part of the course

NO knowledge of JavaScript framework (e.g. Angular, React, Vue) is required

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.

© 2024 ReactDOM
Disclosure: We may receive commissions when you purchase using our links. As an Amazon Associate I earn from qualifying purchases.