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 LIGH...
✔️ 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
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
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
11 июл 2024
