Galería en HTML Y CSS

 

En este video aprenderemos a colocar una galería totalmente responsiva y con efecto light box en nuestra página web, dejo en claro que el Widget o módulo esta listo para descargar y colocarlo en nuestra página web, entonces vamos directamente con los pasos necesarios, (Al final del artículo hay un video donde explico a detalle cada paso)

Paso número 1: debemos de descargar los recursos para eso debemos darle clic al botón verde “DESCARGA EL MÓDULO”.


Paso número 2: debemos te tener 2 carpetas abiertas una es de nuestro módulo y otro de nuestra página en HTML.


Paso número 3:  si  en nuestra carpeta de HTML ya tenemos un style.css deberemos cambiar el nombre nuestros estilos de la galería yo le puse galeria.css


Paso número 4:  Tenemos que pasar el archivo CSS del módulo que descargamos a nuestra página en HTML.

Paso número 5:  Ahora viene mi parte favorita incrustar el código para esto debemos de abrir nuestro editor de código en mi caso uso Brackets y  abrimos el index.html de nuestro módulo que descargamos y vamos a pasar primero el css a nuestra página web.

Paso número 6: ahora vamos a pasar el js

Paso FINAL:

Agregar la galería en HTML

Paso extra:

No olvides que en el paso 3 probablemente cambiaste el nombre de style.css, si lo hiciste debes de cambiarlo en el código.

 

De igual forma dejo un video con una explicación a detalle

 

Agradecemos mucho el apoyo a los anuncios:

Abrir chat
¿Podemos ayudarlo?