Build Custom HTML Elements
A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS
Lo que serás capaz de hacer
Let's face it: You got hundreds 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!
- 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
Temario
UNIDAD 1 - Introduction · 8 leccionesUNIDAD 1 - Introduction
UNIDAD 1 - 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
UNIDAD 2 - Refreshing Next Generation JavaScript (Optional) · 11 leccionesUNIDAD 2 - Refreshing Next Generation JavaScript (Optional)
UNIDAD 2 - 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
UNIDAD 3 - Understanding the Basics · 21 leccionesUNIDAD 3 - Understanding the Basics
UNIDAD 3 - 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
- Time to Practice - The Basics
- Debugging
- Wrap Up
- Useful Resources & Links
UNIDAD 4 - Diving Deeper Into Web Components · 16 leccionesUNIDAD 4 - Diving Deeper Into Web Components
UNIDAD 4 - 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
UNIDAD 5 - Building More Complex Components · 15 leccionesUNIDAD 5 - Building More Complex Components
UNIDAD 5 - 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
UNIDAD 6 - Stencil - An Introduction · 9 leccionesUNIDAD 6 - Stencil - An Introduction
UNIDAD 6 - 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
UNIDAD 7 - Stencil - Diving Into the Basics · 21 leccionesUNIDAD 7 - Stencil - Diving Into the Basics
UNIDAD 7 - 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
- Time to Practice - Stencil
- Wrap Up
- Useful Resources & Links
UNIDAD 8 - Advanced Stencil · 29 leccionesUNIDAD 8 - Advanced Stencil
UNIDAD 8 - 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
- Important: The Listen Decorator
- 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
UNIDAD 9 - Deployment & Publishing · 13 leccionesUNIDAD 9 - Deployment & Publishing
UNIDAD 9 - 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
UNIDAD 10 - Roundup · 3 leccionesUNIDAD 10 - Roundup
UNIDAD 10 - Roundup
- Course Roundup
- Useful Resources & Links
- Bonus: More Content!
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
10 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
2 cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Academind by Maximilian Schwarzmüller.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 10 unidades · 146 lecciones · 50 h
- 12 meses de acceso
- 2 cuestionarios de evaluación
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Academind by Maximilian Schwarzmüller; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
