⚠️ 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    • ⚠️ Crea tu PROPIO LIGHTBOX en JAVASCR...  
✔️ 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/R...
https://neumorphism.io/#e0e0e0
https://icons.getbootstrap.com/icons/...


🎙Podcast de esa serie
https://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 DESARROLLADOR WEB: Per...  
🤯 Explicando Web de forma diferente    • 😱Explicando conceptos: Aprende a prog...  
🙇🏻 Construyendo uns Slider, Acordeón, Tabs...    • 🤯 Construyendo un Carrusel, Slider, A...  

_______
📚¿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:   / eduardofierropro  
✓¡Apóyame en Youtube! https://www.youtube.com/EduardoFierro...
✓Trucos rápidos en TikTok   / eduardofierro.pro  
✓Podcast sobre desarrollo web https://anchor.fm/eduardofierropro
✓Programación en Instagram   / eduardofierro.pro  
✓Códigos para descargar en Github https://github.com/eduardofierropro
✓Noticias sobre web en Twitter   / 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