Web Components and Stencil.js - Build Custom HTML Elements (Udemy.com)

What you'll learnBuild your own re-usable HTML elements that you can use in your own projects or share with other developersOvercome the limitations of the built-in HTML elements with the power of HTML, CSS and JavaScript only

( 100 Reviews )

Created by: Academind by Maximilian Schwarzmaller

Produced in 2022

Quality Score

Content Quality

Video Quality

Qualified Instructor

Course Pace

Course Depth & Coverage

Overall Score : 98 / 100

Live Chat with CourseDuck's Co-Founder for Help

Need help deciding on a javascript course? Or looking for more detail on Academind by Maximilian Schwarzmaller's Web Components and Stencil.js - Build Custom HTML Elements? Feel free to chat below.

Join CourseDuck's Online Learning Discord Community

Course Description

DescriptionLet's face it:A You got thousands of HTMLA tags to choose from but some really helpful ones (, , , ...)A are missing.What if you could build your own HTMLA tags?A 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!)A custom HTMLA elements.Such custom elements don't replace Angular, React or Vue though - instead you can easily use them in ANYA 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.A Stencil.js is a tool that makes the creation of such native web components much easier by using modern features like TypeScript and JSXA (don't know that?A No worries, you'll learn it in the course!).In detail, in this course you will learn:how to build re-usable, lightweight custom HTMLA elements 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 DOMA to scope your CSSA styles 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/A re-use your own web components in ANYA project using ANYA JavaScript framework like Angular, React or Vue (or none at all!)Prerequisites:Basic JavaScriptA knowledge is a must-haveES6 JavaScript knowledge (const, let, classes, ...)A 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)A is requiredNOA TypeScript or JSXA knowledge 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

Beginner Level

Time: 8h

*Some courses are excluded from this sale. Coupon not working? If the link above doesn't drop prices, clear the cookies in your browser and then click this link here.
Also, you may need to apply the coupon code directly on the cart page to get the discount.

Coupon Code

Instructor Details

Academind by Maximilian Schwarzmaller

4.9 Rating
100 Reviews

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 Schwarzmaller and Manuel Lorenz, more instructors to come!

Keep learning!

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 2 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

Introduction to JavaScript (2015)

4.1 (42 Reviews)

Provider: freeCodeCamp

Free

JavaScript Tutorial for Beginners by The Net Ninja (2015)

4.9 (21 Reviews)

Provider: YouTube
Time: 5h

Free

Code! Programming with p5.js for Beginners (2019)

4.2 (14 Reviews)

Provider: YouTube
Time: 7h

Free

More Courses

Reviews

4.9

100 total reviews

5 star 4 star 3 star 2 star 1 star

Write a Review

By Cristian Paun on 6 months ago

Simple and Effective. Highly recommended if you want to learn Web Components from basics.

By Jess Alberto Durn Tovilla on 5 months ago

Another tool that I may find useful at some point.

By Dmitri Smirnov on 6 months ago

Yes.. very good so far. I do recommend it

By Serdar degirmenci on 6 months ago

Great course for introduction to web components.

By Einar Holstad on 5 months ago

The point i like most about max's teaching is he does not just get to the point and makes things work, he takes the pain to pinpoint loopholes and alternative ways to doing so which really get us thinking also and just not follow something like a book manual.

By Mark Long on 3 months ago

Max always presents the material in a details and easy to understand way.

By Maruti Rai on 7 months ago

I like Max's course very much

By Trevor Ehlers on 7 months ago

Hace tiempo que queria aprender WebComponents y en poco ms de una hora ya tengo claro que es el futuro y que Stencil agiliza el proceso usando herramientas punteras (npm TypeScript JSX)

By Sherin Binu on 2 months ago