CSS Grid Layout, ejemplo Práctico de Sitio Web

[@JesúsRodríguez-c6x]

Gracias por el aporte a los principiantes y profesionales tambien, muchas felicitaciones

[@JORGEPEREZ-nz4ul]

Sube más sobre CSS GRID :O ES IMPRESIONANTE! Gracias por compartir!

[@CASGORE]

Gracias men, llevo mucho tiempo siguiendo tus vídeos y la verdad veo el progreso gracias a ti MUCHAS GRACIAS!!!!

[@miguezpz4514]

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.

[@FernandoGoni-eq2hg]

GRID hizo que me vuelva a encantar css. Gracias

[@albertxiri]

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!!

[@germanpinto883]

Uno de los mejores canales de CODING!

[@СерёгаСТАЛКЕР-х7в]

Fazt Code hello, very beautiful, understandable, and most importantly competently!!! Так держать!!!🙂🙂🙂

[@WillyBoy75]

Muchas gracias por esta explicación, me ha enseñado un montón, que Eterno te de mucha salud siempre.

[@SonGoku-pc7jl]

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 :)

[@JuanCarlos-ox3dc]

Lo entendí completito, que clase magistral maestro.

[@FaztCode]

Un gusto que te haya servido Juan. Exitos

[@realGxspxr400]

Muchas gracias sos un genio, sin vos no entendia una chingada y ahora entiendo perfectamente! me suscribi! sos un crack abrazo grande!

[@abrahamdelarosa4740]

Gracias fazt por compartir tu conocimiento y explicar tan chido!

[@Mati_Gutierrez]

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!

[@devaraq]

Grande Maestro! Continue con CSS grid por fa, son una maravilla estas practias!

[@romarioyabar4430]

Jefe Loopback Full Stack con Reactjs por faaa. Thanks. Mereces el cielo. 🙌

[@eliassantos8982]

Gracias!!!, Excelente explicación, Dios le bendiga.!!!

[@italo.buitron]

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?

[@ShinyCuak]

este video es oro puro, muchas gracias!

[@tecaprender4001]

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.

[@vale.ib7]

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.

[@elhistoriador2927]

me propuse a hacerlo con un camino diferente y que quede lo mas similar posible , y enserio me ayudo mucho ver tus vídeos !!!

[@Alejandro85182105]

Buenas!! antes que nada gracias por tus videos! ahora, te hago una consulta, conviene utilizar grid areas o es preferible utilizar css grid?

[@Emma-eb5zb]

Espectacular, aprendí muchísimo.

[@Nomarr]

justo terminaba de leer esto mismo en css tricks, excelente explicación

[@edwarddk9007]

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

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 👏🏼

[@humbertoordaz9433]

Muy interesante y sobre todo muy explícito amigo; te agradezco por compartir tus conocimientos; saludos cordiales.

[@FaztCode]

Saludos Humberto

[@miguelmoyamontero5624]

Dios mío cómo sabes tantooooo 🤷. Gracias por tus vídeos

[@pablovictorvargas5356]

este ejemplo es completisimo y sencillo!!

[@santosahernandezmendoza7147]

Fazt tus vídeos estan haciendo History. He estado al pendiente de los nuevos, mientras tanto estoy viendo los anteriores.

[@yscanderdiaz9554]

¿Se pueden tener varias etiquetas ?

[@HermesNautico]

¡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.

[@nolbertoponce3989]

Gracias me sirvio bastante para repasar grid css :P

[@3Designer_col]

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?

[@jhonatandariomarinjaramill9519]

Gracias Fazt!

[@mitxdreams]

Muchas gracias tio Grande

[@luispulido3516]

Buen video , muchas gracias

[@vicomaya7448]

Muchas gracias Fazt. You blow my mind dude :). Excelente tutorial y lo haces muy fácil de entender, tienes el Don. Saludos hasta Perú

[@germanr1037]

mis respetos, un genio.

[@nicoch8858]

Un maestro muchas gracias por tu aporte!!

[@marcoantoniochicastillo420]

Excelente. Tus vídeos son geniales

[@nicolasrouiller8606]

Excelente video, muy bien explicado! Gracias!!!

[@JairoGomezjairito]

Super...Muchas gracias

[@kevinguzman1929]

Buenísimo el video, gracias por compartir tus conocimientos con nosotros!!! ¡Bendiciones Amigo!

[@franciscocruz7700]

muchas gracias me ayudo mucho

[@ezequielsilva6652]

excelente, muchas gracias!

[@21DiegoMG]

buen video. muchas gracias

[@jaimeirazabal]

Hola muy buenos tus videos, puedes hacer tutoriales sobre blockchain? programación en blockchain.

[@mtycoder]

te felicito, se me hace que tienes muy muy pocas visitas, tu contenido es de calidad

[@maleeme836]

Igual tres h1 no se si es lo mejor opción si fuera un caso real para el seo

[@yscanderdiaz9554]

¿Se pueden tener varias etiquetas?

[@csrlifetimevalue6736]

Si claro, se usan mas que todo en los titulos, las veces que sean necesarias. Pero recuerda es no jaja saludos

[@albertarias751]

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

[@eddiekaka1452]

Muy buen contenido

[@estebanvega1011]

ReactJs + Login Jwt 🙏🙏

[@ezerrobledo]

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. !?

[@sirenitasirenita4976]

Excelente gracias por enseñarnos

[@enrique27yt]

Genial ! pero por favor para alguien que esta empezando esto NO ES SENCILLO ! xD

[@juanleodev]

un video de tu workstation, saludos

[@LIQUIDCHEF11]

hay un error en el codigo que esta escrito en GIT aparece una etiqueta article cerrada en la parte del aside

[@jonathanclaros2588]

Wow , muy bueno. Muchas gracias !

[@angiorl]

Como ordenar?

[@joelgs4220]

muy bien , me esta sirviendo bastante, te mando un saludo!

[@candy-kf9sc]

Me sorprende eres muy bueno

[@candy-kf9sc]

Podría pasarme en la codificación

[@gunsplaine]

Excelente video gracias. Te felicito

[@edwingarcia5043]

Aun no termino de ver el primero, pero gracias por la practica :) la hare despues de terminal el primero

[@osmeig6025]

Por que no instalas 'live server' para no estar refrescando la pantalla a cada minuto.

[@GLzoulx]

Como puedo acomodar otro side al lado izquierdo de la pagina?

[@facundobarrientos2696]

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?

[@trinidad.rodriguezraul9194]

ago lo mismo del video pero mi imagenes se ponen en diferente lugar, y el .title no se pone tampoco

[@francobosdegracia3215]

Excelente vídeo, perooo como se la a cambiar el formato (En Teclado)

[@josealonsoguerreromejia7811]

Una duda un poco, tal vez absurda, cuando se usa y cuando no se usa ">" en CSS? Saludos!

[@rodrigodrk1]

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".

[@edu2786]

Buen tutorial basico pero para hacer buenas practicas se tendria que hacer "Mobil first"(Responsive)

[@estebangabrielmadero2078]

Hola podrias subir el link de los patrones y de las imagenes, me figura error cuando intento buscarlos.Muchas Gracias.

[@peterlu8542]

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...

[@aymemargot4609]

disculpa gracias por tu video muy facil de entender, pero tengo un problema no me funcion el cursor

[@williamjimenez1070]

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

[@albertarias751]

[@germanbaena6579]

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]

¿Podrías explicar más sobre eso o enviar algún enlace?

[@germanbaena6579]

@@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

[@danielspark128]

Gracias por el video Guapo !! xd

[@erickgonda6264]

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

[@albertarias751]

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

[@thevickyarteaga]

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.

[@fernandocalderon2199]

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.

[@ezequielsilva6652]

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!!

[@isaacmartinezrizo]

Continua con css grid en una web completa que tenga menu porfa.

[@daxs2]

creo que pudiste hacerlo solo en grid sin usar nombres de html

[@jeanpaulocampo7842]

que crack

[@diegocamilopenaramirez6101]

Muchas gracias

[@gabrielaponte5680]

Te amo

[@liftringamer2679]

creo que el h1 no se repite...

[@j053ma]

❤

[@gustavojballivian5678]

ALGUNA VEZ ESCUCHE ALGUN DOBLAJE O SE ME HACE? RICK Y MORTY?

[@aimarandony]

Perfecto 👌

[@lacaverna9151]

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 =)

[@omarcr96]

Solo por buenas prácticas

[@nelosanjines6463]

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.

[@dhop7831]

Alguien acá que crea que Fazt debería habilitar un Patreon.

[@franvelsa]

Pro!

[@brandonmontes7223]

Genial!

[@facundorodriguez2823]

como hiciste el fondo ??

[@albertarias751]

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

[@carlosaracena789]

Ufff man, bien bien

[@ricardotovar4597]

Uno de flexbox? 🤔

[@lilexxx9227]

y yo sintiendome especial porque hice el logo de windows con css grid xddd

[@mitxdreams]

Por cierto a dia de hoy 19/05/2021 lorempixel no funciona

[@albertarias751]

revisa de nuevo xD a mi si