Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Meditation Personal Transformation Life Purpose Emotional Intelligence CBT
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Web Components

Web Components & Stencil.js - Build Custom HTML Elements

A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS
Bestseller
Rating: 4.7 out of 54.7 (1,765 ratings)
8,388 students
Created by Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller
Last updated 10/2020
English
English
30-Day Money-Back Guarantee

What you'll 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
Curated for the Udemy for Business collection

Course content

10 sections • 144 lectures • 8h 50m total length

  • Preview01:38
  • Preview06:30
  • Preview03:22
  • Join our Online Learning Community
    00:21
  • Preview03:05
  • Preview06:15
  • Preview02:46
  • Preview03:04

  • Module Introduction
    01:12
  • Understanding "let" and "const"
    03:05
  • Working with Arrow Functions
    05:27
  • Exports and Imports
    04:43
  • Understanding Classes
    04:30
  • Classes, Properties and Methods
    03:03
  • The Spread & Rest Operator
    06:27
  • Refreshing Array Functions
    02:32
  • Understanding Async Code
    01:04
  • Next-Gen JavaScript - Summary
    03:38
  • JS Array Functions
    00:14

  • Module Introduction - What are Web Components?
    05:07
  • Browser Support
    03:05
  • Our Development Setup
    04:38
  • Creating our First Custom Element
    08:29
  • Interacting with the Surrounding DOM
    05:04
  • Understanding the Custom Elements Lifecycle
    02:51
  • Using "connectedcallback" for DOM Access
    02:05
  • Listening to Events Inside the Component
    08:52
  • Using Attributes on Custom Elements
    04:45
  • "Attributes" vs "Properties"
    01:00
  • Styling our Elements
    04:08
  • Using the Shadow DOM
    05:00
  • Adding an HTML Template
    05:40
  • Using Slots
    01:50
  • Defining the Template in JavaScript
    03:29
  • Using Style Tags in the Shadow DOM
    02:40
  • Extending Built-In Elements
    07:33
  • Time to Practice - The Basics
    1 question
  • Debugging
    00:14
  • Wrap Up
    02:30
  • Useful Resources & Links
    00:04

  • Module Introduction
    00:51
  • Understanding Shadow DOM Projection
    02:26
  • Styling "slot" Content Outside of the Shadow DOM
    03:44
  • Styling "slot" Content Inside the Shadow DOM
    03:10
  • Styling the Host Component
    04:42
  • Styling Components from Outside
    00:16
  • Conditional Host Styling
    02:49
  • Styling with the Host Content in Mind
    02:27
  • Smart Dynamic Styling with CSS Variables
    06:20
  • Cleaning Up Our Overall Styling
    03:22
  • Observing Attribute Changes
    06:17
  • Adjusting the Component Behaviour Upon Attribute Changes
    02:34
  • Using "disconnectedcallback"
    04:40
  • Adding a Render Method
    06:13
  • Wrap Up
    02:33
  • Useful Resources & Links
    00:06

  • Module Introduction
    00:52
  • Creating the Basics Modal Component
    06:33
  • Adding the Modal Container
    02:29
  • Styling the Modal Elements
    05:35
  • Adding Some General App Logic
    03:49
  • Opening the Modal via CSS
    05:23
  • Public Methods & Properties
    06:37
  • Understanding Named Slots
    05:45
  • "slotchange" & Getting Access to Slot Content
    05:10
  • Closing the Modal with Modal Buttons
    07:01
  • Dispatching Custom Events
    03:40
  • Configuring Custom Events
    04:52
  • Adding Enhancements & Modal Animations
    04:51
  • Wrap Up
    01:48
  • Useful Resources & Links
    00:01

  • Module Introduction
    01:21
  • Using Web Components in Modern Browsers
    02:35
  • Browser Support for Web Components
    02:27
  • Using Web Components in All Browsers
    00:11
  • Creating a Stencil Project
    02:59
  • What is Stencil?
    03:09
  • Stencil.js behind the Scenes
    00:20
  • Diving Into a First Stencil Component
    06:56
  • Wrap Up
    01:41

  • Module Introduction
    00:35
  • Using the Development Server
    03:19
  • MUST READ: Ensuring Correct Imports
    00:07
  • Creating a New Stencil Web Component
    08:55
  • Styling a Stencil Component
    05:40
  • Using Props
    07:02
  • Important: Reflect Props to Attributes
    00:09
  • Configuring Props
    01:27
  • Using Slots & Styling
    04:54
  • Rendering Conditional Content
    02:08
  • Using Attributes for Styling only
    03:27
  • Using Props in Combination with Attributes
    04:16
  • Understanding Mutable Props
    05:33
  • Preparing Tabs
    03:33
  • Adding More Event Listeners
    04:23
  • Using State
    04:32
  • Adding Methods to Components
    03:40
  • Adding a Backdrop
    05:20
  • Time to Practice - Stencil
    1 question
  • Wrap Up
    01:52
  • Useful Resources & Links
    00:03

  • Module Introdution
    00:38
  • Creating a New Component
    02:48
  • Component & API Preparations
    03:57
  • Submitting Forms
    02:09
  • Styling the Component
    05:49
  • HTTP Requests in Components
    07:43
  • Using the API Key
    02:23
  • Accessing the Host Element
    05:14
  • Using References
    02:52
  • Two Way Binding & Input Validation
    06:32
  • Error Handling
    06:07
  • Using the "componentdidload" Lifecycle Hook
    05:34
  • All Lifecycle Hooks
    05:16
  • Using Update Lifecycle Hooks
    04:41
  • Watching Prop Changes
    04:47
  • Creating a New Component
    05:56
  • Styling the New Component
    01:11
  • Outputting a List of Elements
    06:20
  • Styling the List Items
    02:11
  • Emitting Customs Events
    04:47
  • Important: The Listen Decorator
    00:09
  • Using the Listen Decorator
    06:05
  • Using Hostdata
    04:37
  • Adding a Loading Spinner
    03:53
  • Embedding Components Into Components
    04:54
  • Using CSS Properties
    04:32
  • Using Stencil.js to Build Entire Apps
    00:22
  • Wrap Up
    01:25
  • Useful Resources & Links
    00:03

  • Module Introduction
    00:54
  • Using Stencil Config
    04:59
  • Building & Using the Components
    04:15
  • Using Web Components in a Node.js Project
    02:10
  • Publishing to NPM
    03:24
  • Installing NPM Packages
    01:27
  • Using Web Components in an Angular App
    05:32
  • Using Web Components in a React App
    05:18
  • Using Web Components in a Vue App
    04:31
  • Polyfills & The Internet Explorer
    02:49
  • IE & Polyfills
    00:17
  • Wrap Up
    01:25
  • Useful Resources & Links
    00:03

  • Roundup
    02:58
  • Useful Resources & Links
    00:07
  • Bonus: More Content!
    00:20

Requirements

  • Basic JavaScript knowledge is required (base syntax, DOM basics, objects basics)
  • ES6+ JavaScript knowledge (classes etc) is a plus but not a must-have

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!

Who this course is for:

  • 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

Featured review

Nirupam Burman
Nirupam Burman
14 courses
3 reviews
Rating: 5.0 out of 57 months ago
The course exceeded my expectations, truly unlocking whatever it has to offer and surprised to find the content is not old but based on latest version . The instructor is knowledgeable, He knows how to clear the concepts , The content is very carefully and strategically designed (Very Impressive) . I can now confident buy udemy blindfolded ! You guys rock!

Instructors

Academind by Maximilian Schwarzmüller
Online Education
Academind by Maximilian Schwarzmüller
  • 4.6 Instructor Rating
  • 315,529 Reviews
  • 1,331,187 Students
  • 25 Courses

Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. 

Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.

Currently, you can find courses published by Maximilian Schwarzmüller and Manuel Lorenz, more instructors to come!

Keep learning!

Maximilian Schwarzmüller
Professional Web Developer and Instructor
Maximilian Schwarzmüller
  • 4.6 Instructor Rating
  • 569,897 Reviews
  • 1,350,301 Students
  • 35 Courses

Experience as (Web) Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.

Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 1,000,000 students.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.