Diseñando una galería de imágenes con flexbox

[@antonioweb4708]

Ya no se que calificativo ponerte Jean Carlos....simplemente me quito en sombrero. Eres un crack. Haces que lo difícil sea fácil. Sencillamente Gracias.

[@jrbhbr]

Quiero decirte que me da mucho gusto ver tu canal porque eres una persona muy sensilla y yo puedo ver que su intención és que todos sepan algo de HTML y CSS. Muchas gracias desde Brasil!!

[@Jygproyectosweb]

+jrbhbr Muchas gracias

[@nettomeza2383]

Saludos al Peru, soy de Guatemala y te veo desde USA gracias x los videos. buena honda !!

[@mauriciomontes8235]

aun no veo el video pero se ve bastante bueno, con esto uno queda bastante claro como diseñar con flex box... te felicito por que explicas bastante claro y eso lo hacen las personas que conocen del tema.... asi que felicitaciones ..... saludos!! :)

[@alvarovaldez132]

Excelente el video Jean Carlos eres todo un máster, gracias por compartir tus conocimientos y saludos desde México.

[@adrianacanupaan2359]

gracias.. eh practicado con tu ayuda y eh aprendido mucho.. genio! grosoo

[@monicatorreslescano6739]

cuando explicas se te entiende a la perfección

[@karol.favian]

Maestro usted tiene mis respetos .. Like .. excelente material educativo

[@nerirodriguez1745]

Gran explicación y muchas gracias por compartir tu muy valiosa aportación con el mundo, un saludo desde México.

[@Pablo-bd6rq]

Fantástico Jean! Por cierto, quisiera pedirte un favor. Podrías decirme que medidas utilizaste para las imágenes? :) saludos desde México

[@omarcardona9820]

Buenisimos tutoriales gracias a ellos le puse un slider y una galería a mi web sigue así gracias por ayudarnos a los que desarrollamos web

[@marcorodriguez8891]

Pásanos la dirección de tu web para visitarla y ver qué tal te quedó. Saludos

[@ElvisPinedaR]

ustedes siempre me salvan gracias por sus ttutoriales

[@franberca8025]

Fantástica detallada explicación. Muchas gracias!

[@rojosefo]

Excelente, soluciones sencillas a problemas complejos.

[@clauq347]

Eres un genio !! me han ayudado mucho tus tutoriales

[@juliomontilla100]

muy bueno man! excelentes aportes esta! esta comunidad creo q poco a poco va a dar mucho fruto

[@Jygproyectosweb]

+julio montilla Muchas gracias

[@FascompInformatica]

Jeancarlos Molina un gustazo haberte visto en el Ed-Taller el otro día. El video que acabas de mostrar esta muy bueno y se entiende bastante, es un ejemplo muy bueno de layout. Que bueno que vas abrir una nueva linea dedicada a Redes en mi canal he puesto algunos video sobre eso ya que yo me dedico a eso hace mucho tiempo. Tengo un video de como configurar tu cámara Ip y verla desde Internet, claro que no tengo la facilidad de explicar tan bien como tú pero hago el empeño. Si empiezas hacer de estos videos y te puedo ayudar en lo que sea solo comunicate conmigo y con gusto te ayudo. Un gran Saludo y que te vaya muy bien. Adios.....

[@Jygproyectosweb]

+Fabián Sepúlveda (Fascomp) Hola Fabián, de igual manera que gusto poder conversar contigo, claro estamos para apoyarnos. Muchísimas gracias.

[@juanfernandojf2871]

excelente aporte! una consulta, y si tengo una carpeta llena de imágenes la cual ira agregándose mas y mas como puedo hacer ello para no estar haciendo referencia uno a uno? Gracias...que sigan los éxitos!

[@automediacar]

Estimado, un excelente año... Como petición para un video que hagas a futuro... y es si puede realizar un "tab-navigation" y un "accordion"...!!! Saludos

[@faestz]

muy bueno jCarlos apareci en el primer comentario de face jajajaj, buenos videos amigo, sin complicaciones y solo html y css que nos acomoda muy bien, sigue enseñando, seria bueno mas videos de PHP para avanzar :D saludos!

[@pipebejarano]

Seria genial si enseñaras a realizar un mega menu responsive, muchas gracias por compartir tus conocimientos me ha ayudado mucho para proyectos de la universidad. Saludos desde Colombia (Y)

[@Jygproyectosweb]

+Pipe Planet Aquí hay un par: kzbin.info/www/bejne/oXbMaqGOqdqFgJo kzbin.info/www/bejne/fH3CoJeum5mtp5Y

[@elgatodiego]

Gracias por este tutorial ... saludos desde colombia

[@8P8C]

Como siempre buen aporte hermano!

[@tuandroidhelper1518]

Me gustan muchos tus tutoriales,enserio gracias. podrías hacer un tutorial de como crear un buscador para página web?

[@vnieto26]

Excelente video, buena explicación. Gracias por el aporte.

[@yamilaprosdocimo2294]

que genio man, ole !

[@migpagola]

Gracias de nuevo! tengo una pregunta... En el video utilizas padding junto con border-box pero sin border para separar las imagenes y la distancia sea siempre la misma, pero en tu trabajo de web original de masterteppanyaki parece que si utilizas border white en cada imagen, ¿esta el border en la propia imagen y usas padding o usas border de css y luego margin? No se si me explico, pero la cuestion es que parece que tus imagenes ya tienen el border blanco sin css

[@davidosorio1747]

muchísimas gracias jean carlos.....estupendos tus tutoriales, me están sirviendo para iniciarme.... una pregunta, a la hora de validar nuestra pagina web tendríamos algún problema por usar tanto div`s?? he escuchado que puede ser que en el validador te la rechacen... muchas gracias por tu respuesta de antemano. un saludo

[@Jygproyectosweb]

No, los divs se siguen usando para divisiones que no tengan ningun valor semántico, pero para lo demás si debes usar header, footer o main, cuando corresponda.

[@davidosorio1747]

+J&G Proyectos Web muchas gracias, te felicito por tus tutoriales..... un saludo

[@IssarRamonAguilera]

Hola amigo. Muy buen tutorial y celebro tu disposición para enseñar lo que sabes. Una pregunta: Cómo hacemos para que cada imagen se abra tipo lightbox?

[@Jygproyectosweb]

+Issar Ramon Aguilera Hola puedes usar el plugin con ese nombre se llama así lightbox.js

[@IssarRamonAguilera]

Es para Joomla? En ese caso lo puedo utilizar en una pagina externa a Joomla?

[@IssarRamonAguilera]

Ya lo tengo amigo J&G Proyectos Web fijate lo hice en dos de las imagenes que estoy probando radiocumbre.com.ar/galerias/galeria.html

[@lordgrande]

Hola, una recomendación para la próxima, déjanos el código fuente. Es de mucha utilidad. Gracias por el vídeo!

[@Jygproyectosweb]

+Lord Grande Hola Lord, no suelo dejar el código fuente, porque muchos solo vienen y lo descargan y no miran el vídeo, y lamentablemente no aprenden y mi intención es esa, no que simplemente copien y peguen. Si hay algunos tutoriales donde hay por ahí el código en codepen. Gracias

[@SofiaGaubert]

Fenómeno!!!! Un aplauso

[@mauricioandres5585]

gracias por el video tutorial y muchas gracias por tu conocimiento exito al canal

[@adrianpachonmena1202]

Me encanto el video, manita arriba, videos asi si que merecen la pena ;)

[@robertovalle102]

excelente vídeo :) gracias por tú tiempo y por compartir

[@ricardoesquivel8226]

muy bien explicado, muchas gracias.

[@joaquinast]

gracias excelente como siempre

[@SERENACHILE2010]

Seco para enseñar, felicitaciones :)

[@ironpolux]

El olimpo te aguarda! no se si el canal aun exista pero me he suscrito. Luego cuento sino me dio un ACV intentando reproducir ese codigo.

[@hcaballerox3]

Muchas gracias.

[@florenciacordoba5034]

genial. gracias por el vídeo.

[@oscarmartinez2559]

Hola muy buen vídeo, entre a la pagina de donde esta la galeria y me gustaria saber como hacer el efecto que tienes al hacer click en una imagen

[@ichigomar100]

buenazo bro me salvastes de una eres grande gracias gracias :)

[@tantibus_dg]

hola ¿como es que se auto completan tus códigos o son shortcuts? ¿es un plugin o como lo estableces? saludos y gracias por tus tutoriales :D

[@AlexanderHerreraVargas]

excelente aporte !!

[@wilfredcastillo4031]

bien hecho!!

[@alejandrocorrea9780]

hey super tu tuto genial... genial sout("good job");

[@zte185]

Excelente lo único que creo que faltó fue hacer que las imágenes sean responsivas

[@giomartinez7902]

excelente video

[@Roberto_Garcia-ls6sq]

hola, te felicito por tener el agrado de ayudar a otras personas , y te pediré otro favor XD , como haces que tengan una una linia desde la etiquetas que abren hasta la de cierres ? ejem; l l l l l l l l l l l l como haces que esas lineas bajen ?

[@Jygproyectosweb]

+Roberto_Garcia1407 en brackets es un plugin se llama indent guides luego de instalarlo vas al menú Ver y lo activas

[@Roberto_Garcia-ls6sq]

+J&G Proyectos Web , se que te estoy molestando mucho XD, pero como personalizaste tu brackets esta genial, dimo como pones el resumen de todo los codigos coma lo tienes en el lado derecho y cuando le pones el clik sale el todos los codigos en miniatura

[@Jygproyectosweb]

+Roberto_Garcia1407 aqui lo configuramos kzbin.info/www/bejne/ipCaao1ngLV7Z5om40s

[@animusvacuum]

Algunas capas no tienen erue

[@moi12freg]

muchas gracias me sirvio mucho!!!

Jean Carlos de antemano recibe un cordial saludo; una pregunta fuera de contexto: ¿ese otro canal (Erhan Umut Suar) tambien es tuyo o es pirata, ya que tiene tus mismos videos?

[@CriptivoStudio]

hola excelente vídeo, alguien me dice como se llama la extencion que usa para que cuando pasa el mause por una linea en visual studio se marquen los margenes en el explorador?

[@arielcastillo7925]

Hubiera sido bueno que pongas las imagenes que usaste en la descripcion, asi se evitan algunos detalles, pero fuera de eso Genial!!

[@ian96471]

hola amigo queria me preguntaba si sabes hacer paginas auto admintrables , o agregar entradas tipo blog (agregarle contenido ala pagina )

[@Jygproyectosweb]

Hola, claro, trabajamos desarrollando páginas donde el cliente puede administrar partes de su web o agregar entradas a su blog.

[@ian96471]

no podrias hacer un tutorial en su canal ? ,he buscado por varios sitios y nada de nada :( quiero aprender ha crear una pagina autoadministrable

[@ironpolux]

bien

[@adictohati8681]

Excelente (Y) :D

[@zonagrafffity2970]

de cuanto por cuanto son las imagenes ??

[@sistemadigitalcol]

buena noche, como hace para que en la vista del navegador se marque el area de trabajo. espero su respuesta gracias

[@Jygproyectosweb]

Hola, eso es la vista previa de brackets.

[@marceloAK1]

Hola. Quiero hacer algo similar pero que el usuario pueda subir las imágenes. En tu ejemplo el ancho de las imágenes es el doble del alto. En mi caso el usuario podría llegar a subir imágenes que no tengan esa misma proporción entre el ancho y alto lo cual genera que se deformen las imágenes. Que me recomendas? obligar al usuario a subir imágenes cuyo ancho sea el doble de alto? Que otra opción puedo usar? Muchas gracias.

[@Jygproyectosweb]

Puedes especificar a los usuarios que suban la foto a la medida correcta(asi como lo hace facebook u otras páginas para que no se distorsione) y la otra opción sería crear un script que acomode las imágenes pero ya sería más trabajoso

[@marceloAK1]

Muchas gracias. Excelentes videos. Abrazo.

[@parisvazquez3142]

como haces para que se guarde y recargue en el navegador automaticamente??????

Sé que se puede hacer con Sublime Text y Live Reload

[@TheClaritaa97]

Se podria subir esta galeria a wordpress? Si se puede, como?

[@yoandyvillaman2790]

como se llama esa herramienta que usas para hacer cuadritos ?¿

[@Jygproyectosweb]

+yoandy villaman cuales cuadritos?

[@yoandyvillaman2790]

al principio del vídeo que explicas como están separada cada sección y con el maus haces cuadros rojos (no se si me explico :S) mira el minuto 1:50 al 1:52

[@Jygproyectosweb]

+yoandy villaman ah, es un programa de llama zoomit

[@yoandyvillaman2790]

grande :D Muchas Gracias por cierto felicidades por el canal por que es el único que tiene un montón de vídeos que para el que quiere iniciarse en el mundo de programación web les pueden ayudar así que chapo !! :D

[@eduardomaqueramurrugarra1087]

Alguien podría decirme las dimensiones exactas de cada imagen?? small , normal y large??

Busco lo mismo

[@gdmendez]

Como podria ponerle un boton de "me gusta" o corazon a cada foto??? q no este relacionada con facebook, solamente q aparezca ahi.

[@ricardoramos4139]

que tamaño tienen el normal large y small en px

[@Jygproyectosweb]

+Ricardo Ramos +pmendoza904 Los tamaños son: Normal (500x300) Small (250x150) y large (250x300) pero puede ser cualquier tamaño similar.

[@Jygproyectosweb]

+pmendoza904 revisa el video... ahi no dice main "IMAGE", es img

[@ElvisPinedaR]

pregunta por que en safari me cargan otras fuentes y no se acomoda el flex gracias

[@p0p3l1t0]

Elvis Pineda Usa el prefijo -webkit

[@abitamartinez3327]

mira una pregunta de cuando por cuanto son las imágenes q estoy intentando hacerlo y no me funciona las imágenes me salen del tam;ano completo de la pagina

[@felixgonzales4273]

tengo el mismo problema

[@felixgonzales4273]

solucion: .small img, .normal img{ display: block; width: 100%; height: 100%;}

[@victoriarodriguez921]

alguien tiene el codigo? el link ya no esta vigente :(

[@alexischavez5014]

sitio web masterteppanyaki.com/gallery.html no existe más?

[@Jygproyectosweb]

+Alexis Chavez El usuario cambió de dominio, olvidé cambiarlo www.hibachicater.com/gallery.html allí está

[@alexischavez5014]

+J&G Proyectos Web Un millón de gracias!!!