⚠️ Crea tu PROPIO LIGHTBOX en JAVASCRIPT | Guía completa con HTML y CSS y Event Loop

En este video tutorial aprenderás cómo crear tu propio lightbox en JavaScript utilizando HTML y CSS. Con esta técnica podrás crear galerías de imágenes y mejorar la experiencia visual de tus usuarios. Seguiremos paso a paso la implementación de esta funcionalidad, para que puedas aprender de manera sencilla y práctica. No te pierdas este video y comienza a implementar esta técnica en tus proyectos web. ¡Suscríbete al canal para más contenido sobre desarrollo web y programación! 🔖 TODOS los vídeos de esta SERIE ✔️ Lightbox con HTML, CSS y JS https://youtu.be/jVM-YU8s6SQ ✔️ Lightbox con HTML, SCSS BEM y Typescript (Próximamente) ✔️ Lightbox con HTML, SCSS SUITCSS y Typescript (Próximamente) ✔️ Lightbox con ReactJS y CSS (Próximamente) ✔️ Lightbox con ReactJS y SASS (Próximamente) ✔️ Lightbox con ReactJS y Styled Components (Próximamente) ✔️ Lightbox con Angular (Próximamente) 📕DESCARGA el PDF 🔗 Enlaces a los materiales https://github.com/eduardofierropro/Reset-CSS https://neumorphism.io/#e0e0e0 https://icons.getbootstrap.com/icons/x-lg/ 🎙Podcast de esa serie https://open.spotify.com/episode/0uB6Lsy1EemMySXInPOZzP 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 https://www.youtube.com/playlist?list=PLJpymL0goBgEzi6Z5AQysL8B-PNeovcjj 🚀ROADMAP Desarrollo WEB https://www.youtube.com/playlist?list=PLJpymL0goBgFzvCuhEJJ29-x1H_Uo5Esv 🤯 Explicando Web de forma diferente https://www.youtube.com/playlist?list=PLJpymL0goBgFK8kBgMuAAGfUEuP83Q1Ab 🙇🏻 Construyendo uns Slider, Acordeón, Tabs... https://www.youtube.com/playlist?list=PLJpymL0goBgFXN27jElLCmysKQboKW7uW _______ 📚¿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! 👉https://cei.es/?ref=eduardofierropro ______ ✅Directos en Twitch: https://twitch.tv/eduardofierropro ✓¡Apóyame en Youtube! https://www.youtube.com/EduardoFierroPro?sub_confirmation=1 ✓Trucos rápidos en TikTok https://www.tiktok.com/@eduardofierro.pro ✓Podcast sobre desarrollo web https://anchor.fm/eduardofierropro ✓Programación en Instagram https://www.instagram.com/eduardofierro.pro ✓Códigos para descargar en Github https://github.com/eduardofierropro ✓Noticias sobre web en Twitter https://twitter.com/i/lists/1325827794627129344 ✓Mi web https://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 00:49 ¿Qué es el efecto Lightbox? 01:22 Ejemplo de un Lightbox 01:47 ¿Cómo abrir un Lightbox? 02:33 ¿Cómo colocar la imagen de un Lightbox? 02:51 ¿Cómo cerrar un Lightbox? 03:11 Descárgate el código en Github 03:39 Creando la estructura de carpetas 04:50 Enlazando el CSS y Javascript 05:11 Añadiendo el Reset de CSS 06:02 Añadiendo use strict en Javascript 06:25 Creando una galería grid de imágenes en HTML 06:44 Creando una galería grid de imágenes en CSS 07:33 Grid de imágenes Responsive 08:00 Añadiendo las imágenes a HTML 08:29 Añadiendo sobras a las imágenes 09:38 Añadiendo hover y active a las imágenes en CSS 11:06 Creando un Lightbox en HTML 11:22 Añadiendo un icono svg en HTML 12:15 Creando un Lightbox con CSS 14:15 Añadiendo el hover y active al botón de cerrar 17:02 Añadiendo la clase en CSS para Javascript 17:29 Comprobando la clase en HTML para Javascript 18:35 Creando el Lightbox en 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