Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication 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 Certifications Network & Security Hardware Operating Systems & Servers 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 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 Paid 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 & Gardening 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 & Diet Yoga Mental Health Martial Arts & 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 Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js PHP HTML5 Vue JS
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA Microsoft AZ-900 AWS Certified Developer - Associate
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Blockchain
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Virtual Reality
Google Flutter Android Development iOS Development React Native Swift Dart (programming language) Mobile App Development Kotlin SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Meditation Sound Therapy CBT Cognitive Behavioral Therapy
Entrepreneurship Fundamentals Business Fundamentals Freelancing Business Strategy Startup Business Plan Online Business Blogging Home Business
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Google Analytics Copywriting Email Marketing Drop Servicing YouTube Marketing

DevelopmentWeb DevelopmentWeb 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 (2,523 ratings)
11,926 students
Created by Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller
Last updated 11/2021
English
English

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

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 B.
19 courses
3 reviews
Rating: 5.0 out of 5a year 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.7 Instructor Rating
  • 459,211 Reviews
  • 1,941,155 Students
  • 36 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.7 Instructor Rating
  • 769,071 Reviews
  • 1,967,231 Students
  • 47 Courses

Experience as (Web) Developer

Starting out at the age of 12 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 and more than 1,500,000 students on Udemy 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,500,000 students.

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.