En este video de Lightbox y Angular, exploramos cómo crear un lightbox personalizado utilizando Angular. Aprenderás a crear un componente de lightbox reusable y cómo implementar diferentes características como animaciones y controles de navegación. También discutiremos las mejores prácticas para mejorar el rendimiento y la accesibilidad. Este video es perfecto para cualquier desarrollador de Angular que quiera agregar una funcionalidad de lightbox a su proyecto web. ¡Asegúrate de verlo hasta el final para obtener consejos útiles y trucos para optimizar tu lightbox con Angular!
🔖 TODOS los vídeos de esta SERIE
✔️ Lightbox con HTML, CSS y JS • ⚠️ Crea tu PROPIO LIGH...
✔️ Lightbox con HTML, SCSS BEM y Typescript • 💅🟦 Crea tu PROPIO LIGH...
✔️ Lightbox con HTML, SCSS SUITCSS y Typescript • 🧰 SUITCSS con una GALE...
✔️ Lightbox con Angular • 🅰️ Crea tu LIGHTBOX en...
✔️ Lightbox con ReactJS y CSS (Próximamente)
✔️ Lightbox con ReactJS y SASS (Próximamente)
✔️ Lightbox con ReactJS y Styled Components (Próximamente)
📕DESCARGA el PDF
(Próximamente)
🔗 Enlaces a los materiales
github.com/eduardofierropro/R...
neumorphism.io/#e0e0e0
icons.getbootstrap.com/icons/...
🎙Podcast de esa serie
open.spotify.com/episode/0uB6...
Si te ha gustado el vídeo dale a like, suscríbete y ¡dale a la campanita! 😊
____
📹Otros vídeos de mi canal
😊 Vídeos recomendados • 👉Vídeos recomendados
🚀ROADMAP Desarrollo WEB • 🔎ROADMAP de un DESARRO...
🤯 Explicando Web de forma diferente • 😱Explicando conceptos:...
🙇🏻 Construyendo uns Slider, Acordeón, Tabs... • 🤯 Construyendo un Carr...
_______
📚¿Estás buscando un Curso, Máster o Bootcamp sobre desarrollo web?
Soy profesor en la escuela CEI donde imparto Cursos y Másters sobre desarrollo web donde puedes obtener un descuento del 5% en el precio del curso usando el código embajador.eduardofierro
¡Pide información sobre los cursos donde soy profesor desde este enlace!
👉cei.es/?ref=eduardofierropro
______
✅Directos en Twitch: / eduardofierropro
✓¡Apóyame en RU-vid! ru-vid.com...
✓Trucos rápidos en TikTok / eduardofierro.pro
✓Podcast sobre desarrollo web anchor.fm/eduardofierropro
✓Programación en Instagram / eduardofierro.pro
✓Códigos para descargar en Github github.com/eduardofierropro
✓Noticias sobre web en Twitter / 1325827794627129344
✓Mi web eduardofierro.pro
______
Psss... Si has llegado hasta aquí eres un auténtico CRUCK de la vida. ¿Vemos cuántos somos poniendo "de frontends!!" en los comentarios ? 😏
______
Capítulos:
00:00 Introducción
01:13 Creando estructura de carpetas
01:55 Añadiendo el reset
02:46 Enlazando el CSS y el Javascript
03:21 HTML de una galería de imágenes
03:54 HTML de un Lightbox
05:00 SASS de una galería de imágenes
08:37 SASS de una galería Lightbox
12:50 Typescript de un Lightbox
20:06 Event Loop de un Lightbox
23:44 Optimizando el Typescript de un Lightbox
25:57 Funciones en Typescript
26:10 Transpilación de Typescript
27:25 Añadiendo los pointer en Typescript
27:47 Event loop de Javascript
18:48 Pseudocódigo para abrir Lightbox
19:17 Constantes de un lightbox en Javascript
19:56 addEventListener a imágenes del grid en Javascript
20:55 Transition en CSS para el Lightbox
21:51 Explicación de los atributos SRC de las imágenes
22:31 Añadiendo el psedocódigo del Lightbox
22:52 Atributos SRC en Javascript
23:47 Cómo cerrar un Lightbox en Javascript
24:16 Pseudocódigo para cerrar Lightbox
25:13 Cuidado con los nombres de constantes
25:46 Centrando el Lightbox en el Body
26:26 Event Loop y Cómo funciona
26:55 ¿Cómo abrir el inspector de elementos de Chrome?
27:17 Observa el Event Loop PASO a PASO
30:29 Optimizando el Javascript del Lightbox
30:47 Optimizando funciones arrow
31:10 Creando funciones handler en Javascript
32:00 Optimizando el forEach
33:08 Optimizando los eventos con pointerdown
4 авг 2024
