Llevo poco con la programación, actualmente estoy estudiando el tema de los tipos de display Flex y Grid y estaba confundido, tu video me aclaró muchas dudas. Muchas gracias hermano.
Grid y Responsive layout, directo y fácil. Dios este vídeo me ha salvado la vida!! Tengo que hacer una pagina web muy parecida para clase, una simplemente de ejemplo y la que has hecho es suuuuper parecida a lo que me piden!! Thxxx!!
muchas gracias Fazt, lo vi hace casi un año y me gustó pero ahora lo veo y lo entiendo mucho mejor. De echo me ha ido genial para repasar css grid y aplicarlo en un proyecto que me salió por fin :)
Muchas gracias Amigo, entnedi un poco mas Grid, os conceptos y la forma que hacer una pagina responsive. Saludos desde Argentina/Misiones exactamente y ya estoy subscripto....Saludos.
Muy buen video! Me sirvio un monton para poder entender y aplicar para el curso que estoy haciendo. Muchisimas gracias. Te ganaste un nuevo suscriptor! Ojala sigas subiendo videos de este tipo. Saludos desde Argentina!
¡Buenas! Primero que nada gracias por tu aportación a mi formación. Grid es un tema árido cuando entudinado sólo con documentación. El 'code along' facilita mucho. Tus videos fue lo primero que encontre cuando comenze y me dieron ganas de continuar. ¿Se utiliza mucho la grid en React.js? No me imagino haciendo map() los elementos de un arreglo en celdas de una grid.
Una pregunta, en lugar de crear una grilla de 5 se podría crear una grilla de dos (panel y side bar) y el que era 5 elementos ser un nuevo grid dividido en 5?
corrijanme si estoy equivocado pero yo puedo entender entonces que grid sirve para maquetar o distribuir los items en la pagina web mientras que flexbox sirve para alinear los items que estan dentro de grid
Si, aunque creo que una vez escuche a alguien decir que no era muy SEO amigable, pero no estoy muy seguro asi que si quieres podrias usar etiquetas distintas y darles el mismo tamaño con css
Buenísimo! Cómo todos tus videos . Tenés alguno dónde comentes sobre los atajos de teclado por ejemplo que utilizas o que plugins instalar en vs code. ? Porque cada vez que haces algo como acomodar el código o rellenar automáticamente un div con contenido aleatorio me da ganas de hacerlo pero no sé cómo. !?
Amigo yo tengo un problema, yo coloco que hay 2 columnas y el 1fr al contenedor padre, logicamente abajo de eso tengo el contenedor hijo, le digo que ocupe de la columna hasta la 2 pero no la ocupa, solo ocupa 1 sola columna, alguna solucion?
Fazt, excelente vídeo, pero a estas alturas (2019) es mejor diseñar con la técnica Mobile First, hace más simple el código y mucho más óptimo; no lo contrario.
@@rodrigodrk1 , claro que sí; actualmente el desarrollo web es Responsive Web Design; o sea diseño adaptable a cualquier pantalla; y entre las técnicas del RWD está Mobile First, o sea diseñar primero para los dispositivos móviles e ir escalando hacia dispositivos más grandes hasta llegar a Desktop, esto permite hacer diseños más sencillos con solamente lo indispensable para Celulares y Tablets, logrando mejor desempeño de una web e ir incluyendo mayor complejidad en el diseño para dispositivos de pantallas grandes. En la web encuentras miles de enlaces al respecto: es.ryte.com/wiki/Mobile_First
genial!! lo unico que me sembro dudas es porque cada vez que modificabas la seccion de sidebar las imagenes eran otras (veia que las imagenes cambiaban) XD
por que el sitio que el usa que le proporciona imagenes "lorem pixel" pone imagenes al azar cada vez que recargas se hace una peticion a lorem pixel y esta devuelve una imagen cualquiera de su galeria con el tema relacionado: Sports/Deportes People/Personas esas son algunas categorias como ejemplo
Hola, estoy haciendo el tutorial poco a poco y revisando todo el código pero no logro que el sidebar me quede bien. .container .sidebar{ grid-column: span 2; background-color: #485460; color: #fff; /*usamos flex*/ display: flex; justify-content: center; align-items: center; /*cambiamos la dirección*/ flex-direction: column; } .container > .sidebar img{ width: 100%; margin-top: 5px; } Ves el error??? A grandes razgos lo solucione poniendo una foto de 400x267. Saludos.
Se usa ">" cuando quieres que solo los hijos directos de cierto elemento sean aplicados. Por ejemplo: div.container-posts > div.post , estás diciendo que el estilo solo se aplique a todos los div con la clase "post" que sean hijos DIRECTOS del div con la clase "container-posts".
Hay un error en el minuto 15 del video. Para que la Grid se acomode correctamente, después de .container > .footer, escriban .container > .related post (no .related .div). Saludos.
me volvi loco 5 minutos, hasta que inspeccione y me di cuenta que no me tomaba ese div, y le puse el nombre de la clase que mencionas. ojala hubiera visto tu comentario antes jeje. saludos!!
esta hecho con puro css en la descripcion dejo un sitio web con los fondos hechos. Aunque para ser mas especificos el lo menciona y muestra como en el video
El video está genial, muchas gracias por compartirlo, pero no entiendo por qué usas tantos h1. No se debe usar más de un h1 en un documento HTML, podias haber usado un h1, un h2, y luego dentro de los articles crear sections...
una duda. por que para acceder por ejemplo al "content" accedes desde el container ( .container > .content) y no directamente (.content) si hay alguna diferencia y alguien me lo explica gracias =)
Gracias por el aporte a los principiantes y profesionales tambien, muchas felicitaciones
Uno de los mejores canales de CODING!
Sube más sobre CSS GRID :O ES IMPRESIONANTE! Gracias por compartir!
Gracias men, llevo mucho tiempo siguiendo tus vídeos y la verdad veo el progreso gracias a ti MUCHAS GRACIAS!!!!
Llevo poco con la programación, actualmente estoy estudiando el tema de los tipos de display Flex y Grid y estaba confundido, tu video me aclaró muchas dudas. Muchas gracias hermano.
Grid y Responsive layout, directo y fácil. Dios este vídeo me ha salvado la vida!! Tengo que hacer una pagina web muy parecida para clase, una simplemente de ejemplo y la que has hecho es suuuuper parecida a lo que me piden!! Thxxx!!
Fazt Code hello, very beautiful, understandable, and most importantly competently!!! Так держать!!!🙂🙂🙂
GRID hizo que me vuelva a encantar css.
Gracias
Muchas gracias sos un genio, sin vos no entendia una chingada y ahora entiendo perfectamente! me suscribi! sos un crack abrazo grande!
Lo entendí completito, que clase magistral maestro.
Un gusto que te haya servido Juan. Exitos
Muchas gracias por esta explicación, me ha enseñado un montón, que Eterno te de mucha salud siempre.
muchas gracias Fazt, lo vi hace casi un año y me gustó pero ahora lo veo y lo entiendo mucho mejor. De echo me ha ido genial para repasar css grid y aplicarlo en un proyecto que me salió por fin :)
Gracias fazt por compartir tu conocimiento y explicar tan chido!
Gracias!!!, Excelente explicación, Dios le bendiga.!!!
gracias por enseñar el grid ,lo e entendido todo en este video, gracias por esto y puse un me gusta y me e suscrito.
Grande Maestro! Continue con CSS grid por fa, son una maravilla estas practias!
este video es oro puro, muchas gracias!
Muchas gracias Amigo, entnedi un poco mas Grid, os conceptos y la forma que hacer una pagina responsive. Saludos desde Argentina/Misiones exactamente y ya estoy subscripto....Saludos.
Muy interesante y sobre todo muy explícito amigo; te agradezco por compartir tus conocimientos; saludos cordiales.
Saludos Humberto
Muy buen video! Me sirvio un monton para poder entender y aplicar para el curso que estoy haciendo.
Muchisimas gracias.
Te ganaste un nuevo suscriptor!
Ojala sigas subiendo videos de este tipo.
Saludos desde Argentina!
Espectacular, aprendí muchísimo.
justo terminaba de leer esto mismo en css tricks, excelente explicación
este ejemplo es completisimo y sencillo!!
Dios mío cómo sabes tantooooo 🤷. Gracias por tus vídeos
Un maestro muchas gracias por tu aporte!!
me propuse a hacerlo con un camino diferente y que quede lo mas similar posible , y enserio me ayudo mucho ver tus vídeos !!!
Increíble 👏🏼 es el segundo video que veo de tu canal, y ademas de una explicación buenisima me has solucionado muchas dudas que tenia 👏🏼
Buenísimo el video, gracias por compartir tus conocimientos con nosotros!!! ¡Bendiciones Amigo!
Jefe Loopback Full Stack con Reactjs por faaa. Thanks. Mereces el cielo. 🙌
te felicito, se me hace que tienes muy muy pocas visitas, tu contenido es de calidad
muchas gracias me ayudo mucho
Gracias me sirvio bastante para repasar grid css :P
Excelente video, muy bien explicado! Gracias!!!
Buen video , muchas gracias
excelente, muchas gracias!
Super...Muchas gracias
Muchas gracias Fazt. You blow my mind dude :). Excelente tutorial y lo haces muy fácil de entender, tienes el Don. Saludos hasta Perú
Muchas gracias tio Grande
buen video. muchas gracias
Excelente gracias por enseñarnos
Fazt tus vídeos estan haciendo History. He estado al pendiente de los nuevos, mientras tanto estoy viendo los anteriores.
Excelente. Tus vídeos son geniales
mis respetos, un genio.
Wow , muy bueno. Muchas gracias !
Gracias Fazt!
muy bien , me esta sirviendo bastante, te mando un saludo!
Muy buen contenido
Excelente video gracias. Te felicito
¡Buenas! Primero que nada gracias por tu aportación a mi formación. Grid es un tema árido cuando entudinado sólo con documentación. El 'code along' facilita mucho. Tus videos fue lo primero que encontre cuando comenze y me dieron ganas de continuar. ¿Se utiliza mucho la grid en React.js? No me imagino haciendo map() los elementos de un arreglo en celdas de una grid.
Una pregunta, en lugar de crear una grilla de 5 se podría crear una grilla de dos (panel y side bar) y el que era 5 elementos ser un nuevo grid dividido en 5?
Me sorprende eres muy bueno
Podría pasarme en la codificación
Buenas!! antes que nada gracias por tus videos!
ahora, te hago una consulta, conviene utilizar grid areas o es preferible utilizar css grid?
Aun no termino de ver el primero, pero gracias por la practica :) la hare despues de terminal el primero
¿Se pueden tener varias etiquetas ?
un video de tu workstation, saludos
Muchas gracias
Gracias por el video Guapo !! xd
Hola muy buenos tus videos, puedes hacer tutoriales sobre blockchain? programación en blockchain.
Perfecto 👌
corrijanme si estoy equivocado pero yo puedo entender entonces que grid sirve para maquetar o distribuir los items en la pagina web mientras que flexbox sirve para alinear los items que estan dentro de grid
¿Se pueden tener varias etiquetas?
Si claro, se usan mas que todo en los titulos, las veces que sean necesarias. Pero recuerda es no jaja saludos
Si, aunque creo que una vez escuche a alguien decir que no era muy SEO amigable, pero no estoy muy seguro asi que si quieres podrias usar etiquetas distintas y darles el mismo tamaño con css
ReactJs + Login Jwt 🙏🙏
❤
hay un error en el codigo que esta escrito en GIT aparece una etiqueta article cerrada en la parte del aside
Buenísimo! Cómo todos tus videos . Tenés alguno dónde comentes sobre los atajos de teclado por ejemplo que utilizas o que plugins instalar en vs code. ? Porque cada vez que haces algo como acomodar el código o rellenar automáticamente un div con contenido aleatorio me da ganas de hacerlo pero no sé cómo. !?
Amigo yo tengo un problema, yo coloco que hay 2 columnas y el 1fr al contenedor padre, logicamente abajo de eso tengo el contenedor hijo, le digo que ocupe de la columna hasta la 2 pero no la ocupa, solo ocupa 1 sola columna, alguna solucion?
Genial practica, solo una aclaración a nivel estructural... solo debe haber un h1 por cada layout, y de ahi h2, h3...
¿no es asi?
que crack
Te amo
Como puedo acomodar otro side al lado izquierdo de la pagina?
Ufff man, bien bien
Genial!
Fazt, excelente vídeo, pero a estas alturas (2019) es mejor diseñar con la técnica Mobile First, hace más simple el código y mucho más óptimo; no lo contrario.
¿Podrías explicar más sobre eso o enviar algún enlace?
@@rodrigodrk1 , claro que sí; actualmente el desarrollo web es Responsive Web Design; o sea diseño adaptable a cualquier pantalla; y entre las técnicas del RWD está Mobile First, o sea diseñar primero para los dispositivos móviles e ir escalando hacia dispositivos más grandes hasta llegar a Desktop, esto permite hacer diseños más sencillos con solamente lo indispensable para Celulares y Tablets, logrando mejor desempeño de una web e ir incluyendo mayor complejidad en el diseño para dispositivos de pantallas grandes.
En la web encuentras miles de enlaces al respecto:
es.ryte.com/wiki/Mobile_First
Igual tres h1 no se si es lo mejor opción si fuera un caso real para el seo
ago lo mismo del video pero mi imagenes se ponen en diferente lugar, y el .title no se pone tampoco
Hola podrias subir el link de los patrones y de las imagenes, me figura error cuando intento buscarlos.Muchas Gracias.
Buen tutorial basico pero para hacer buenas practicas se tendria que hacer "Mobil first"(Responsive)
Por que no instalas 'live server' para no estar refrescando la pantalla a cada minuto.
genial!! lo unico que me sembro dudas es porque cada vez que modificabas la seccion de sidebar las imagenes eran otras (veia que las imagenes cambiaban) XD
por que el sitio que el usa que le proporciona imagenes "lorem pixel" pone imagenes al azar cada vez que recargas se hace una peticion a lorem pixel y esta devuelve una imagen cualquiera de su galeria con el tema relacionado: Sports/Deportes People/Personas esas son algunas categorias como ejemplo
Como ordenar?
Hola, estoy haciendo el tutorial poco a poco y revisando todo el código pero no logro que el sidebar me quede bien.
.container .sidebar{
grid-column: span 2;
background-color: #485460;
color: #fff;
/*usamos flex*/
display: flex;
justify-content: center;
align-items: center;
/*cambiamos la dirección*/
flex-direction: column;
}
.container > .sidebar img{
width: 100%;
margin-top: 5px;
}
Ves el error???
A grandes razgos lo solucione poniendo una foto de 400x267.
Saludos.
Una duda un poco, tal vez absurda, cuando se usa y cuando no se usa ">" en CSS?
Saludos!
Se usa ">" cuando quieres que solo los hijos directos de cierto elemento sean aplicados.
Por ejemplo: div.container-posts > div.post , estás diciendo que el estilo solo se aplique a todos los div con la clase "post" que sean hijos DIRECTOS del div con la clase "container-posts".
Genial ! pero por favor para alguien que esta empezando esto NO ES SENCILLO ! xD
Pro!
Exelte vídeo, no se si de pronto podrias hacer videos sobre pug template engine, para trabajar de forma más rápida con html.
Alguien acá que crea que Fazt debería habilitar un Patreon.
Gracias -excelente curo- M egustaria saber porque coloco dos etiquetas h1. Me puede indicar como colocar un png de mi logo en el header? GRACIAS
Uno de flexbox? 🤔
Hay un error en el minuto 15 del video. Para que la Grid se acomode correctamente, después de .container > .footer, escriban .container > .related post (no .related .div). Saludos.
me volvi loco 5 minutos, hasta que inspeccione y me di cuenta que no me tomaba ese div, y le puse el nombre de la clase que mencionas. ojala hubiera visto tu comentario antes jeje. saludos!!
Continua con css grid en una web completa que tenga menu porfa.
como hiciste el fondo ??
esta hecho con puro css en la descripcion dejo un sitio web con los fondos hechos. Aunque para ser mas especificos el lo menciona y muestra como en el video
Excelente vídeo, perooo como se la a cambiar el formato (En Teclado)
creo que el h1 no se repite...
:0000 gracias
y yo sintiendome especial porque hice el logo de windows con css grid xddd
disculpa gracias por tu video muy facil de entender, pero tengo un problema no me funcion el cursor
El video está genial, muchas gracias por compartirlo, pero no entiendo por qué usas tantos h1. No se debe usar más de un h1 en un documento HTML, podias haber usado un h1, un h2, y luego dentro de los articles crear sections...
12:42
creo que pudiste hacerlo solo en grid sin usar nombres de html
una duda. por que para acceder por ejemplo al "content" accedes desde el container ( .container > .content) y no directamente (.content) si hay alguna diferencia y alguien me lo explica gracias =)
Solo por buenas prácticas