Udemy

Platform

English

Language

Web Development

Category

Web Components & Stencil.js - Build Custom HTML Elements

A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS

4.84 (1936 reviews)

Students

9 hours

Content

Oct 2020

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive  SkillShare  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

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


Description

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!


Screenshots

Web Components & Stencil.js - Build Custom HTML Elements
Web Components & Stencil.js - Build Custom HTML Elements
Web Components & Stencil.js - Build Custom HTML Elements
Web Components & Stencil.js - Build Custom HTML Elements

Content

Introduction

Introduction

Web Components - A Quick Demo

What are Web Components

Join our Online Learning Community

Why Do We Use Web Components?

Comparing Web Components & Frameworks

Course Outline

How To Get The Most Out Of The Course

Refreshing Next Generation JavaScript (Optional)

Module Introduction

Understanding "let" and "const"

Working with Arrow Functions

Exports and Imports

Understanding Classes

Classes, Properties and Methods

The Spread & Rest Operator

Refreshing Array Functions

Understanding Async Code

Next-Gen JavaScript - Summary

JS Array Functions

Understanding the Basics

Module Introduction - What are Web Components?

Browser Support

Our Development Setup

Creating our First Custom Element

Interacting with the Surrounding DOM

Understanding the Custom Elements Lifecycle

Using "connectedcallback" for DOM Access

Listening to Events Inside the Component

Using Attributes on Custom Elements

"Attributes" vs "Properties"

Styling our Elements

Using the Shadow DOM

Adding an HTML Template

Using Slots

Defining the Template in JavaScript

Using Style Tags in the Shadow DOM

Extending Built-In Elements

Debugging

Wrap Up

Useful Resources & Links

Diving Deeper Into Web Components

Module Introduction

Understanding Shadow DOM Projection

Styling "slot" Content Outside of the Shadow DOM

Styling "slot" Content Inside the Shadow DOM

Styling the Host Component

Styling Components from Outside

Conditional Host Styling

Styling with the Host Content in Mind

Smart Dynamic Styling with CSS Variables

Cleaning Up Our Overall Styling

Observing Attribute Changes

Adjusting the Component Behaviour Upon Attribute Changes

Using "disconnectedcallback"

Adding a Render Method

Wrap Up

Useful Resources & Links

Building More Complex Components

Module Introduction

Creating the Basics Modal Component

Adding the Modal Container

Styling the Modal Elements

Adding Some General App Logic

Opening the Modal via CSS

Public Methods & Properties

Understanding Named Slots

"slotchange" & Getting Access to Slot Content

Closing the Modal with Modal Buttons

Dispatching Custom Events

Configuring Custom Events

Adding Enhancements & Modal Animations

Wrap Up

Useful Resources & Links

Stencil - An Introduction

Module Introduction

Using Web Components in Modern Browsers

Browser Support for Web Components

Using Web Components in All Browsers

Creating a Stencil Project

What is Stencil?

Stencil.js behind the Scenes

Diving Into a First Stencil Component

Wrap Up

Stencil - Diving Into the Basics

Module Introduction

Using the Development Server

MUST READ: Ensuring Correct Imports

Creating a New Stencil Web Component

Styling a Stencil Component

Using Props

Important: Reflect Props to Attributes

Configuring Props

Using Slots & Styling

Rendering Conditional Content

Using Attributes for Styling only

Using Props in Combination with Attributes

Understanding Mutable Props

Preparing Tabs

Adding More Event Listeners

Using State

Adding Methods to Components

Adding a Backdrop

Wrap Up

Useful Resources & Links

Advanced Stencil

Module Introdution

Creating a New Component

Component & API Preparations

Submitting Forms

Styling the Component

HTTP Requests in Components

Using the API Key

Accessing the Host Element

Using References

Two Way Binding & Input Validation

Error Handling

Using the "componentdidload" Lifecycle Hook

All Lifecycle Hooks

Using Update Lifecycle Hooks

Watching Prop Changes

Creating a New Component

Styling the New Component

Outputting a List of Elements

Styling the List Items

Emitting Customs Events

Using the Listen Decorator

Using Hostdata

Adding a Loading Spinner

Embedding Components Into Components

Using CSS Properties

Using Stencil.js to Build Entire Apps

Wrap Up

Useful Resources & Links

Deployment & Publishing

Module Introduction

Using Stencil Config

Building & Using the Components

Using Web Components in a Node.js Project

Publishing to NPM

Installing NPM Packages

Using Web Components in an Angular App

Using Web Components in a React App

Using Web Components in a Vue App

Polyfills & The Internet Explorer

IE & Polyfills

Wrap Up

Useful Resources & Links

Roundup

Roundup

Useful Resources & Links

Bonus: More Content!


Reviews

K
Koen30 September 2020

Another amazing course from Max. I really enjoyed the topic and the concept of web components is really interesting. I can't wait to use the power of web components in my next projects. As a side note, it also made me help understand frameworks like React or Vue even better. Highly recommended!

M
Markus27 September 2020

The course really starts for absolut beginners in web development like me, and the spoken english is clearly understandable.

R
Rostislav22 September 2020

As I think I wouldn't use this technology often to build my custom components, it is really nice to know how does for example Ionic components works behind the scene.

A
Abhishek11 September 2020

On a personal note, I see this course to be an exhaustive one served in a smaller package!!! I am satisfied with the concepts being delivered in a very structured manner, which helps in making logical constructs and engineering custom elements easier. Also, one cannot just stop completing the course, it is required to deep dive into the web components and explore more. I would definitely recommend the course to somebody, who wants to get a head start in understanding web components.

V
Vincent27 July 2020

I think this is my 7th course from Academind, so I've explained the value of his courses in all of my other reviews. Well worth the time and money AND revisiting as the tech propagates.

Z
Zachary21 February 2020

I have taken Max's courses on other topics and he does a great job of breaking ideas down into smaller digestible chunks and then building into a bigger idea with those.

C
Christian25 January 2020

it is a good course, though i think if author had made third chapter more understable by making draw explanings things as in first chapters , had made me not to watch over and over the chapter ..... congratulations Max its a great teacher!!!!!!

A
Adi25 January 2020

Great course by MAX ! Everything is very clear to understand. The pace is great and the resources attached to every section are good for deeper learning. The course is practical and straight to the point of the topic.

R
Reuben13 January 2020

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. The shadow DOM really makes sense now as a React developer!

Y
Yevgeniy8 January 2020

This is a great course for everyone. Really, it doesn't matter, if you're just learning Html, CSS and Javascript or want to build really cool and advanced things with it. Considering the fact, that Max always keeps his courses up to date with new libraries and language versions, this is a really good buy. Considering he really keeps his courses up to date, not just bumping last update date as I've seen so often here on Udemy with many other instructors you'll surely do nothing wrong taking this one.

R
Roge8 January 2020

i am have watched now some chapters and i find the course very interesting and clear, very excited about what is coming

W
William25 December 2019

Very informative. I appreciate Max's attention to detail. My only criticism of this course is the fade in he uses. On some of the lessons, the focus was off for far longer than it needed. Other than that, great work, and thank you.

P
Peter22 December 2019

Just an other perfect course from Max and AcadeMind. 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.

D
Dennis12 December 2019

Great course with great explanations. Very useful for me to build my school projects with web components. Thank you Max, I'm a huge fan of your courses.

R
Romon10 December 2019

I was looking for some good Stenciljs online course. I must say this course is the best and it serves it's purpose very well.


2035334

Udemy ID

11/19/2018

Course created date

6/20/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram