Web Components & Stencil.js - Build Custom HTML Elements (Udemy.com)
A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS
Created by: Academind by Maximilian Schwarzmller
Produced in 2021
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
Quality Score
Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/
Overall Score : 94 / 100
Course Description
Let's face it:
You got thousands of HTMLtags to choose from but some really helpful ones (, , , ...)are missing.
What if you could build your own HTMLtags?
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 HTMLelements.
Such custom elements don't replace Angular, React or Vue though - instead you can easily use them in ANYweb 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 HTMLelements with native browser featureshow to build web components of all complexities - from a simple tooltip to modals or side drawershow to pass data into your own web components and use it therehow to emit your own custom events which you can listen to in JavaScripthow to use the Shadow DOMto scope your CSSstyles to your custom elementshow to use Stencil.
js to get a much easier development workflowhow to use the many features Stencil.
js provides to build native web components way more efficientlyhow to deploy/re-use your own web components in ANYproject using ANYJavaScript framework like Angular, React or Vue (or none at all!)Prerequisites:
Basic JavaScriptknowledge is a must-haveES6 JavaScript knowledge (const, let, classes, ...)is strongly recommended but not strictly required - a brief refresher is provided as part of the courseNO JavaScript framework knowledge (e.
g. Angular, React, Vue)is requiredNOTypeScript or JSXknowledge is requiredLet'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
You got thousands of HTMLtags to choose from but some really helpful ones (
What if you could build your own HTMLtags?
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 HTMLelements.
Such custom elements don't replace Angular, React or Vue though - instead you can easily use them in ANYweb 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 HTMLelements with native browser featureshow to build web components of all complexities - from a simple tooltip to modals or side drawershow to pass data into your own web components and use it therehow to emit your own custom events which you can listen to in JavaScripthow to use the Shadow DOMto scope your CSSstyles to your custom elementshow to use Stencil.
js to get a much easier development workflowhow to use the many features Stencil.
js provides to build native web components way more efficientlyhow to deploy/re-use your own web components in ANYproject using ANYJavaScript framework like Angular, React or Vue (or none at all!)Prerequisites:
Basic JavaScriptknowledge is a must-haveES6 JavaScript knowledge (const, let, classes, ...)is strongly recommended but not strictly required - a brief refresher is provided as part of the courseNO JavaScript framework knowledge (e.
g. Angular, React, Vue)is requiredNOTypeScript or JSXknowledge is requiredLet'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
Instructor Details
- 4.7 Rating
271 Reviews
Academind by Maximilian Schwarzmller
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 Schwarzmller and Manuel Lorenz, more instructors to come!
Keep learning!
More courses by Academind by Maximilian Schwarzmller
MongoDB - The Complete Developer's Guide 2021 (2021)
4.7 (312 Reviews)
Provider: Udemy
Time: 17h
$11.99
![Flutter & Dart - The Complete Guide [2021 Edition]](/programming/flutter/images/1708340_7108_4.jpg?v=1789153474)
Flutter & Dart - The Complete Guide [2021 Edition] (2021)
4.7 (312 Reviews)
- Provider: Udemy
- Time: 41h
$11.99
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide (2021)
4.6 (299 Reviews)
- Provider: Udemy
- Time: 18.5h
$11.99
Svelte.js - The Complete Guide (incl. Sapper.js) (2021)
4.7 (294 Reviews)
- Provider: Udemy
- Time: 12.5h
$11.99
AWS Serverless APIs & Apps - A Complete Introduction (2021)
4.6 (287 Reviews)
- Provider: Udemy
- Time: 7.5h
$11.99
More javascript courses
Reviews
- Video Duration:
8.5h - Price: 11.99 Track Price 11.99 Track Price
- Provider: Udemy
- Year:
2021 - Language:
English - Certificate:
Yes
30-Day Money-Back Guarantee
Udemy Coupon Price Tracker
