Componentes Web personalizados y Stencil.js: Crear elementos HTML reutilizables — PickAClass
3.7 (7) ⏱ 3 h 📚 30 lecciones

Componentes Web personalizados y Stencil.js: Crear elementos HTML reutilizables

Cree etiquetas HTML personalizadas, reutilizables y independientes de la plataforma mediante API de navegador nativas y Stencil.js para optimizar su flujo de trabajo de desarrollo web en cualquier marco moderno.

  • 💬 Instructor de IA
    Pregunta sobre cualquier lección y recibe una respuesta clara al instante, cuando quieras.
  • 🕐 Empieza cuando quieras
    Sin horarios ni fechas límite: aprende a tu ritmo, cuando quieras.
  • 🌐 En español
    Lecciones, tareas y certificado: todo completamente en tu idioma.

Sobre este curso

Las etiquetas HTML estándar son muy funcionales, pero los diseños web modernos a menudo requieren elementos de interfaz especializados como pestañas personalizadas, modales o cajones laterales que no existen de forma nativa, haciendo que su código de interfaz de usuario sea altamente reutilizable en diferentes proyectos y configuraciones. En este curso basado en texto, pasará de escribir marcado estándar a diseñar sus propios elementos personalizados robustos y encapsulados.Comprenderá cómo aprovechar las tecnologías nativas del navegador junto con Stencil.js para compilar componentes altamente eficientes y compatibles con estándares que funcionan sin problemas en JavaScript vanilla o en cualquier marco importante. Lo que aprenderás: - Comprenda las especificaciones fundamentales de los componentes web nativos, incluidos los elementos personalizados, Shadow DOM y las plantillas HTML. - Construir etiquetas personalizadas completamente encapsuladas y aisladas por estilo que no entren en conflicto con el resto del CSS de su aplicación. - Administrar el estado del componente, pasar datos a través de atributos y comunicar cambios mediante eventos personalizados. - Implemente las mejores prácticas de accesibilidad, incluidos los roles ARIA y la administración de enfoque, para garantizar que sus elementos personalizados sean utilizables por todos. - Aproveche Stencil.js para acelerar el desarrollo con TypeScript, JSX y la vinculación de datos reactivos eficiente. - Integre e implemente sus elementos personalizados en cualquier aplicación o marco web moderno. Comenzará explorando las definiciones principales y las API nativas que impulsan los elementos personalizados antes de pasar a flujos de trabajo avanzados con Stencil.js.A través de explicaciones escritas claras y fragmentos de código prácticos, aprenderá a estructurar, dar estilo y enviar componentes listos para la producción. Este curso está diseñado para desarrolladores web y diseñadores que desean construir interfaces de usuario modulares; familiaridad básica con HTML, CSS y JavaScript introductorio es todo lo que necesita para comenzar. Comience a leer hoy para dominar el futuro del desarrollo web modular.

Lo que obtendrás

  • 📜 Certificado de finalización
    Añádelo a tu perfil de LinkedIn
  • 💬 Tutor AI personal
    ¿Atascado en una lección? Pregúntale a tu tutor integrado lo que quieras, cuando quieras.
  • ♾️ Acceso de por vida
    Vuelve cuando quieras, sin caducidad
  • 📱 Teléfono o computadora
    Funciona en cualquier dispositivo
  • 💸 Reembolso de 14 días
    Sin preguntas
  • Breve y enfocado
    3 h de contenido práctico

Certificado de finalización

Cada curso que completas en PickAClass emite una credencial como esta — original, con su propio código, verificable por URL y detallada sobre lo que realmente demostraste.

P
PickAClass
Perfil de habilidades · verificable
Documento
Certificado de Maestría
Esto certifica que
Nombre Apellido
ha demostrado con éxito el dominio de
Componentes Web personalizados y Stencil.js: Crear elementos HTML reutilizables
Habilidades demostradas
Análisis de patrones de comportamiento
Fundamental
1.2 h
Marcos de arquitectura de decisiones
Competente
1.4 h
Diseño de pruebas A/B
Competente
1.7 h
Redacción conductual
Avanzado
1.9 h
P
PickAClass — Nombre Apellido
Componentes Web personalizados y Stencil.js: Crear elementos HTML reutilizables
Página 2 de 2
Detalle de desempeño
Resumen del curso
Lecciones completadas 14 / 14
Preguntas de práctica 26 / 28
Tareas entregadas 4 (prom. 4.5 / 5)
Proyecto final Revisado — 4.6 / 5
Práctica total 6.2 h
Referencia de desempeño
Posición en la cohorte Top 12% de 1,625
Tiempo hasta completar 11 días (mediana: 22)
Puntuación de dominio 91 / 100
Puntuación de preguntas de práctica 94%
Verificación de habilidad Ruta de habilidad verificada
Verifica esta credencial
pickaclass.com/certificates/PCC-2026-X4F7-AP19
Emitido bajo los estándares académicos de PickAClass. Los niveles de habilidad reflejan el desempeño evaluado frente a la rúbrica de competencias del curso. Es una credencial original de esta plataforma.

Reseñas (7)

Stefan Pretorius ZA Estudiante verificado
★ 4 · 25 julio 2026

Contenido sólido aquí. Si bien un par de los módulos podrían haber sido más detallados, el valor general y la aplicabilidad son altos.

Leonardo De Luca IT
★ 3 · 15 julio 2026

Contenido sólido y presentado claramente. Aprecié las aplicaciones del mundo real que se mostraron.Podría haber usado algunas oportunidades de práctica más.

Ana Silva PT Estudiante verificado
★ 5 · 6 julio 2026

Estoy muy contento de haber tomado esto. La forma en que se desglosaron los conceptos lo hizo súper accesible.

Romain Michel MC Estudiante verificado
★ 3 · 30 junio 2026

Es una introducción decente, pero podría beneficiarse de ejemplos más diversos y un flujo ligeramente mejor entre los módulos.

Despina Nikolaidou GR
★ 4 · 11 junio 2026

Realmente disfruté el flujo de esto. Los ejemplos estaban en el lugar y me ayudaron a comprender el material rápidamente.

Noah Johnson AU Estudiante verificado
★ 4 · 8 junio 2026

Los ejemplos eran muy claros y realmente ayudaron a solidificar los conceptos. Definitivamente vale la pena el tiempo invertido.

Emma Ruiz UY Estudiante verificado
★ 3 · 5 junio 2026

Me pareció útil para un repaso, pero no estoy seguro de que sea el mejor punto de partida para un principiante completo.

Escribir una reseña

Te pediremos iniciar sesión después de enviar — tu borrador se guarda.

Otros también tomaron

Preguntas frecuentes

¿Qué necesito para tomar este curso? +

Solo un teléfono o computadora con internet. Sin instalaciones ni hardware especial.

¿Cómo pago? +

Con tarjeta a través de Stripe. No almacenamos datos de tarjeta — Stripe los gestiona de forma segura.

¿Puedo obtener un reembolso? +

Sí — reembolso completo en 14 días, sin preguntas.

¿Por cuánto tiempo tendré acceso? +

Para siempre. Una vez comprado, el curso es tuyo para revisarlo cuando quieras.

¿Obtendré un certificado? +

Sí. Al finalizar recibirás un certificado que puedes añadir a tu perfil de LinkedIn.

Diseñado para profesionales en
Tecnología Diseño Finanzas Marketing Salud Educación Hostelería Manufactura