En este tutorial, aprenderás cómo crear un lightbox personalizado utilizando Typescript, HTML, SASS y BEM. Además, puedes descargar el código fuente del proyecto. Con este tutorial, podrás crear un lightbox de imágenes para tu sitio web que sorprenderá a tus visitantes. Desde la creación de la estructura de carpetas hasta la transpilación de Typescript, todo se explica paso a paso. También se incluyen consejos útiles sobre metodología BEM y cómo aumentar los graves en el proceso de edición. ¡No te pierdas este tutorial!
🔖 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 (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:48 Creando la estructura de carpetas
01:36 Añadiendo el Reset CSS
02:12 Archivo partial Reset CSS
02:53 Enlazando el CSS y el Javascript
03:45 Creando el HTML de un Lightbox
04:01 Creando un grid de imágenes en HTML con BEM
04:22 Creando un lightbox de imágenes en HTML con BEM
05:57 Grid de imágenes en CSS
10:43 Lightbox en CSS
16:30 Pseudocódigo de un Lightbox en Typescript
17:16 Constantes en Typescript
18:12 Evento de las imágenes del Grid en Typescript
19:45 Añadiendo los tipos de datos en Typescript
20:36 Tipo de dato de querySelectorAll en Typescript
21:02 Tipo de dato de querySelector en Typescript
22:15 Cerrando lightbox en Typescript
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
11 июл 2024
