dios mio una vida peleando para que los elementos me tomaran todo el height de la pagina, videos de horas, tutoriales x demás hasta que llegue aca, genial
LIteralmente sigo sin creer que es real poder hacerlo de esta manera tan facil, videos de HORAS, en serio MUCHAS HORAS y solo renegaba con los width, los height y demas, no se, te amo uwu
Es increíble como este video supera y arraza a todos los profesores vuelteros y rebuscados que pueden saber mucho y explican para la mismísima miércoles gastando 3 horas para que nadie entienda nada. Por miles de videos como este 🎇🎆🎇🎆
Hola como te va!!. Vengo de tutorial en tutorial, y no es por menospreciar a ningún creador de contenido. La mayoría no puede explicar en 2 horas de reloj, lo que vos acabas de explicar en unos minutos, y eso no es nada fácil de conseguir! Agradezco haberme topado con este video. Un millón de gracias!
maravilloso, tenia problemas con maquetar paginas web con grid ya que lo hacia posicionando cada elemento con grid-columm y grid-row, ahora con grid-template-area se me facilitara mucho. Muchas gracias
Hola :) entiendo la teoria cuando no tengo un contenedor (wrapper) fijo. Si tengo un wrapper de width: 360px. Cómo lo hago responsive? Estoy haciendo un proyecto y llevo 3 semanas intentando saber como hacerlo y nada. Porfa podrías a ayudarme? Muchas Gracias y Dios te bendiga :)
tambien funcionaria para las cards? quiero hacer un responsive porque en mod celular no se ven las card bien, se miran estiradas y feas y no e podido hacerlo porque lo tengo en flex
Este tutorial esta de maravilla @Yoelvis te felicito, ya te di mi like, ¿Tendrás algún tutorial donde pueda tener una estructura grid dentro de otra estructura grid?. por ejemplo este mismo maquetado, si quiero dentro del MAIN otro diseño con css grid
Hola Miguen, no tengo un tutorial sobre eso, pero si que puedes usar cuantos grid quieras anidados, piensa en el grid como el flexbox y el display block, puedes tener cuantos necesites así sea para algo simple como poner un botón a la derecha de un texto con un gap específico
Perfecto, muchas gracias por compartir tus conocimientos, estoy retomando la programación y este video si que motiva, muy sencillo practico y explicado. Gracias por el aporte.
Hola amigo, en ese caso yo añadiría 2 columnas extra en el header, navbar y footer y las pondría vacías en el main y sidebar, de esa manera puedes manejar el espacio alrededor, acá te dejo un ejemplo para que veas la idea cuando estamos en modo tablet que es el que veo que me consultas (main y sidebar). Saludos codepen.io/ymulenll/pen/BazOQag?editors=0100
Acá te dejo el ejemplo centrando el navbar, el main y el sidebar que creo que debe ser lo que andas buscando, apliqué la misma técnica de añadir columnas extras y dejas algunas vacías para los espacios alrededor: codepen.io/ymulenll/pen/vYKzyrq?editors=1100
Muchas gracias por tu video, he buscado muchos tutoriales, pero a mi punto de vista no explican para que sirve esto, etc. Excelente tu trabajo. Espero otro video de tu parte pero ya con un maqueto completo. Excelente trabajo.👍
Excelentes videos no sabes como me ayudaste a entender muchas cosas.... no sin olvidar decirte que tienes mucho parecido con Jaime Bayly.. jeje algo de humor. Gracias
Para una tarea de maquetar con media query estuve todo el dia como un pelotudo con flexbox usando medidas volviendome loco y resulta que existía esto!! 😠😭 SUSCRITO GRACIAS
@media (min-width: 600px){ .grid-container{ grid-template-columns: 200px auto; grid-template-rows: 100px 50px auto 100px; grid-template-areas: "header header" "navbar navbar" "sidebar" "main" "footer" "footer"; } } esta igual y el sidebar no se coloca al lado del main. (guarde todo lo hice de vuelta achique la pantalla pero nada)
Cordial saludo, mira que el código lo he hecho exactamente igual hasta el minuto 5:14 y resulta que el header no esta centrado y se localiza a la izquierda de la pantalla. Sumado a esto, cuando en css, se cambia de posición el sidebar debajo del main, el sidebar mantiene la posición encima del main. A que se debe esto? Gracias por su pronta respuesta.
Muchas horas de búsqueda y la solución en este vídeo, deberías mejorar la forma en la que encuentran tú vídeo, recibirías mas visitas. Saludos y gracias.
amigo muchas gracias, soy venezolano y he iniciado este camino de la programación hace poco tu video es de muchísima ayuda para los que queremos tomar este camino a una vida mejor
Hola Yoelvis!!! te quiero agradecer muchísimo la didáctica que tienes y como transmites tus conocimientos y los compartes!!!!!!, te felicito!!!, te descubrí y me di cuenta que es una forma de aprender excelente!!!!, estoy en un proyecto de hacerle una página a mi hija y quisiera hacer algo dinámico , como que aparezca como un video mudo, y letras, tu lo enseñaras en algún momento?, saludos cordiales desde Argentina!!!
jajajajaja para mi nivel de programacion esas son cosas del diablo jajaj excelente video me suscribo y manita arriba, vere en tu canal si tienes otro igual pero con flex o incluso como llenarias esa esctructura que hiciste con elementos dentro de el usando flex
que pasada, sencillo, super util y como han dicho por ahí, que manera de ahorrarnos tiempo y horas delante del ordenador. Por cierto, el grid no necesita nada como en alguno casos con flexbox, lo de -webkit... -moz... -os.... para que se visualice en todos de igual manera no?
Amigo, gracias desde el corazón, un amigo me paso tu link, pero se que el tiempo que use y no avance "era necesario" para seguir en este mundo de la programacion.....GRACIAS
Hola Yoelvis, pudiera usted ayudarme, necesito hacer esto mismo pero en React , no puedo hacer que con grid ocupe todo el alto con este método ya que el body tiene un div root y a la vez ese div " root " tiene otro div " app " y ese div "app" tiene dentro un "router" y recién ahí un div "grid-container" donde separo todo en header navbar, main, sidebar y footer. es que claramente algo estoy haciendo mal, el modo en el cual están puestas las cosas hace que grid se me haga confuso, los elementos "hijos" del body en react son solamente el div "root", podría usted decirme como debería organizar una pagina con un header navbar, main,sidebar y footer en react?. muchisimas gracias
Hola amigo yoelvis podría hacer un tutorial donde explique como implementar un método de pago a una página web de acuerdo ala moneda local del el país. Ejemplo: en peso, como puedo integrar, que la gente hagan pago a través de un banco local a la página web. porq todo el mundo lo hace es con paypal y lo quiero hacer con una moneda local gracias antemano si me puede ayudar, algo así como mercado pago en mercado libre
dios mio una vida peleando para que los elementos me tomaran todo el height de la pagina, videos de horas, tutoriales x demás hasta que llegue aca, genial
mismo caso jejeje
LIteralmente sigo sin creer que es real poder hacerlo de esta manera tan facil, videos de HORAS, en serio MUCHAS HORAS y solo renegaba con los width, los height y demas, no se, te amo uwu
Es increíble como este video supera y arraza a todos los profesores vuelteros y rebuscados que pueden saber mucho y explican para la mismísima miércoles gastando 3 horas para que nadie entienda nada. Por miles de videos como este 🎇🎆🎇🎆
X2
@@jonathansanso5900 El desastre es cuando intentas poner cajas de texto etiquetas o usar formularios no pude!!!!!!
Una explicación tan simple, y otros profesores lo explican muy difícil hasta te pierden
Uno de los mejores tutoriales que he visto y fácil de entender. Muchas gracias, lo necesitaba urgente.✌🥺
Gracias
Perfecto. A veces no es lo que sabes, sino como explica, lo haces bien y sencillo de entender. Gracias
Hasta ahora este es el mejor tutorial que veo relacionado con CSS Grid 👍👍👍
Hola como te va!!. Vengo de tutorial en tutorial, y no es por menospreciar a ningún creador de contenido. La mayoría no puede explicar en 2 horas de reloj, lo que vos acabas de explicar en unos minutos, y eso no es nada fácil de conseguir! Agradezco haberme topado con este video. Un millón de gracias!
Muchas gracias me da mucho ánimo tu comentario para seguir compartiendo contenido. Saludos 🙌!
Wuoo, esto literalmente manda a la mierda a bootstrap
excelente explicacion...viendolo en 2022
Uauu encontre la luz, venia de varios tutoriales buenos y muy buenos. Pero no se, haciendo el tuyo me funciono todo. Felicitaciones Yoelvis!
QUE EXPLICACION MAS INTERESANTE
Amigo, eres genial. Muchas gracias.
Excelente video. Gracias!
Me saco el sombrero.. Mis sinceros saludos.
Muy bien explicado
maravilloso, tenia problemas con maquetar paginas web con grid ya que lo hacia posicionando cada elemento con grid-columm y grid-row, ahora con grid-template-area se me facilitara mucho. Muchas gracias
la verdad que si, se facilita muchísimo
Like? like? me suscribi y comparti el video 👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼
la verdad que mas claro imposible!!!!!! excelente, muchas gracias
Exelente video ,queria comenzar a agregar grid a mis desarrollos web y se ve genial la herramienta
Yoelvis Mulen { code } *SUPER EXCELENTE* video, excelente explicación. Gracias 👍
Fantástico video!! muchas gracias por esta magnifica explicación!!
Wow, eres un genio 👌
wow, wow, wow. Me pase horas intentando maquetar y programar responsive. Solo te tomo 13 minutos. Mis mejores 13 minutos invertidos. Gracias Yoelvis.
Eres un MASTER
Excelente explicación, saludos desde Ecuador-Guayaquil, gracias por compartir conocimiento.
Saludos!
Hola amigo, buen video donde aprendiste Css? Puedes darme las referencias? Gracias:)
Sos un capo amigo
Excelente video y explicación, muchísimas gracias. Saludos desde Aguascalientes!!
Excelente, estoy haciendo un curso y me saqué un montón de dudas con tu video. Super claro, conciso y sencillo de ver
Te felicito!!!
muy bueno hermano ... espero mas por favor mas grid creando paginas ... mis felicitaciones
Excelente el video! me despejó muchas dudas que tenia, MUCHAS GRACIAS !!
que belleza de video man, muchas gracias
me alegro mucho, saludos!
Transmites mucha alegría por compartir. Motivas mucho.
Hola :) entiendo la teoria cuando no tengo un contenedor (wrapper) fijo. Si tengo un wrapper de width: 360px. Cómo lo hago responsive? Estoy haciendo un proyecto y llevo 3 semanas intentando saber como hacerlo y nada. Porfa podrías a ayudarme? Muchas Gracias y Dios te bendiga :)
Hola, no entiendo bien, el wrapper con ancho fijo de 360px o ese sería el ancho máximo?
@@YoelvisM hola :) ancho fijo= width:960px;
mejor explicado imposible, yo que estoy haciendo un curso entendi mejor con este bro tu eres loco
Que buen video , me sirvió mucho gracias
me alegra mucho, saludos!
hola muy bueno.... una pagina creada con grid .. alguna tipo para deportes noticias porfaaaa...
excelente video !! pude aprender algo importante con explicacion clara y sencilla!! Muchas gracias!! Saludos desde Buenos Aires!!
Buenas !!!
MUY buen video !! Muy claro y bien explicado. Asi da gusto !!
Muchas gracias Yoelvis y un saludo !!
Muy bueno. No lo conocia y me ha impresionado
Muchas gracias
Muchas gracias, realmente me ha servido mucho. Solo estaba utilizando Flexbox, pero de ahora en más voy a aplicar esto ¡Saludos!
Que bien, igual puedes seguir usando flexbox pero en muchos casos es mucho mejor el grid, sobre todo en diseños de 2 dimensiones como grids o layouts
@@YoelvisM Dale, genial. Lo voy a tener en cuenta ¡Muchas gracias por el consejo!
Muchísimas gracias. Se entiende perfecto. Una gran ayuda.
Excelente, amigo, quisiéramos ver un ejemplo completo,.
tambien funcionaria para las cards? quiero hacer un responsive porque en mod celular no se ven las card bien, se miran estiradas y feas y no e podido hacerlo porque lo tengo en flex
Este tutorial esta de maravilla @Yoelvis te felicito, ya te di mi like, ¿Tendrás algún tutorial donde pueda tener una estructura grid dentro de otra estructura grid?. por ejemplo este mismo maquetado, si quiero dentro del MAIN otro diseño con css grid
Hola Miguen, no tengo un tutorial sobre eso, pero si que puedes usar cuantos grid quieras anidados, piensa en el grid como el flexbox y el display block, puedes tener cuantos necesites así sea para algo simple como poner un botón a la derecha de un texto con un gap específico
@@YoelvisM muchísimas gracias, ya realizare todas esas pruebas, un abrazo.
Compañero te ganaste un nuevo subscriptor!! Mil millones de gracias brotherrrr.
new sub, new like. Saludos desdeUruguay!!
Muchas gracias amigo, saludos desde Brasil 💯💯💯✍️ el mejor video fel TH-cam
Perfecto, muchas gracias por compartir tus conocimientos, estoy retomando la programación y este video si que motiva, muy sencillo practico y explicado. Gracias por el aporte.
Muy bueno.
Yoelvis, Everything is very beautiful, clean and correct! Ты молодец!!!🙂
Y como haría si quiero que se centre el Main y el sidebar al entrar en modo desktop, probé con justify-content pero se pone muy pequeña la página
Hola amigo, en ese caso yo añadiría 2 columnas extra en el header, navbar y footer y las pondría vacías en el main y sidebar, de esa manera puedes manejar el espacio alrededor, acá te dejo un ejemplo para que veas la idea cuando estamos en modo tablet que es el que veo que me consultas (main y sidebar). Saludos
codepen.io/ymulenll/pen/BazOQag?editors=0100
Acá te dejo el ejemplo centrando el navbar, el main y el sidebar que creo que debe ser lo que andas buscando, apliqué la misma técnica de añadir columnas extras y dejas algunas vacías para los espacios alrededor:
codepen.io/ymulenll/pen/vYKzyrq?editors=1100
excelente
Que genio sos, aprendí mucho de tus tutoriales Saludos desde Argentina.
Muchas gracias por tu video, he buscado muchos tutoriales, pero a mi punto de vista no explican para que sirve esto, etc. Excelente tu trabajo. Espero otro video de tu parte pero ya con un maqueto completo. Excelente trabajo.👍
Como que me dieron ganas de ya no usar flexbox con tanta frecuencia, no pense que Grid seria mas sencillo y mas facil de entender
Excelentes videos no sabes como me ayudaste a entender muchas cosas.... no sin olvidar decirte que tienes mucho parecido con Jaime Bayly.. jeje algo de humor. Gracias
Para una tarea de maquetar con media query estuve todo el dia como un pelotudo con flexbox usando medidas volviendome loco y resulta que existía esto!! 😠😭 SUSCRITO GRACIAS
@media (min-width: 600px){
.grid-container{
grid-template-columns: 200px auto;
grid-template-rows: 100px 50px auto 100px;
grid-template-areas:
"header header"
"navbar navbar"
"sidebar" "main"
"footer" "footer";
}
}
esta igual y el sidebar no se coloca al lado del main. (guarde todo lo hice de vuelta achique la pantalla pero nada)
Muy genial! muchas gracias, bien explicado, nuevo sub.
Cordial saludo, mira que el código lo he hecho exactamente igual hasta el minuto 5:14 y resulta que el header no esta centrado y se localiza a la izquierda de la pantalla. Sumado a esto, cuando en css, se cambia de posición el sidebar debajo del main, el sidebar mantiene la posición encima del main. A que se debe esto? Gracias por su pronta respuesta.
Muchas gracias excelente video muy bien explicado me ayudaste mucho
como puedo dejar de base la configuración para pantallas de tablets?
Muchas horas de búsqueda y la solución en este vídeo, deberías mejorar la forma en la que encuentran tú vídeo, recibirías mas visitas. Saludos y gracias.
Mejor que Figma, aprendo más CSS Grid y no dejarme automatizar por la aplicación.
Bro eres grande explicando 💪🏾💪🏾💪🏾💪🏾 exitos bro
Lo máximo este sistema amigo. Ayuda mucho a mi que revien estoy empezando....
El mejor tutorial de grids que vi, horas viendo videos y aca en 13 minutos lo explico a la perfección.
amigo muchas gracias, soy venezolano y he iniciado este camino de la programación hace poco tu video es de muchísima ayuda para los que queremos tomar este camino a una vida mejor
Hola otra vez, es que olvidé decirte que el diseño que debo hacer es responsive no adaptativo. Porfa ayudame, estoy muy pero muy triste...Gracias
Acabo de ver el video..aun no se si estoy dormido o despierto..que barbaro..😊
Gracias por la simpleza con que es explicas, me motivaste a probar maquetear... Muchas gracias amigo
Hola Yoelvis!!! te quiero agradecer muchísimo la didáctica que tienes y como transmites tus conocimientos y los compartes!!!!!!, te felicito!!!, te descubrí y me di cuenta que es una forma de aprender excelente!!!!, estoy en un proyecto de hacerle una página a mi hija y quisiera hacer algo dinámico , como que aparezca como un video mudo, y letras, tu lo enseñaras en algún momento?, saludos cordiales desde Argentina!!!
Muy buen video, muy buena explicacion , simple y claro, te felicito y te doy las gracias por compartir tus habilidades en maquetacion.
gracias por el comentario y por seguir el canal, saludos!
Muy buen video, buena explicación, gracias
jajajajaja para mi nivel de programacion esas son cosas del diablo jajaj excelente video me suscribo y manita arriba, vere en tu canal si tienes otro igual pero con flex o incluso como llenarias esa esctructura que hiciste con elementos dentro de el usando
flex
que pasada, sencillo, super util y como han dicho por ahí, que manera de ahorrarnos tiempo y horas delante del ordenador. Por cierto, el grid no necesita nada como en alguno casos con flexbox, lo de -webkit... -moz... -os.... para que se visualice en todos de igual manera no?
Gracias Yoelvis, muy bueno ! ahora debo ver como poner contenido dentro desde los componentes de Angular. Saludo desde Argentina !
Era hacer un vídeo bro, no el mejor tutorial de la vida 🤯❤. MUCHAS GRACIAS, hiciste verlo como un juego
jaja muchas gracias por el comentario
gracias yoelvis por alimentar mis conocimientos muy bien explicado, sigue así amigo. Like y nuevo sub
Amigo, gracias desde el corazón, un amigo me paso tu link, pero se que el tiempo que use y no avance "era necesario" para seguir en este mundo de la programacion.....GRACIAS
dios mío este video me hizo sentir un imbécil, perdí muchas horas tratando de entender como organizar las cajas. Muchas gracias.!!
Gracias, lo explicaste de una forma sencilla y clara. Muy útil
paque videos de 2 horas para aprender GRID 13 minutos con vos y chau sos un grande 😘😘
tantos videos que he visto y con este aprendí nuevos trucos.
Muy bueno y bien explicado, muchas gracias.
muchas gracias , me gusto mucho, excelente presentación. mas cursos suban
Yoelvis, recordá agregar al final de tu video el boton de subscibir y las recomendaciones ^_*
excelente el video y didáctico y para ingresar formularios que se enlace con SQL o cualquier base de datos
Gracias , la mejor explicación que he visto , excelente
Es mejor hacer una pagina maquetada con grid, o de la manera convencional ajustando los elementos con margenes, padings y centrados XY??
Muchas gracias por esto, en realidad ayudas mucho. Un gran abrazo
Hola Yoelvis, pudiera usted ayudarme, necesito hacer esto mismo pero en React , no puedo hacer que con grid ocupe todo el alto con este método ya que el body tiene un div root y a la vez ese div " root " tiene otro div " app " y ese div "app" tiene dentro un "router" y recién ahí un div "grid-container" donde separo todo en header navbar, main, sidebar y footer.
es que claramente algo estoy haciendo mal, el modo en el cual están puestas las cosas hace que grid se me haga confuso, los elementos "hijos" del body en react son solamente el div "root", podría usted decirme como debería organizar una pagina con un header navbar, main,sidebar y footer en react?. muchisimas gracias
Podrías hacer un vídeo de cómo crear una plantilla para blogger?
Muchas gracias. El mejor tutorial sobre el tema. Saludos.
La mejor explicación que he visto definitivamente, gracias por tu tiempo para enseñar. Saludos!!
Muchas gracias
la verdad
simplemente, el mejor video. gracias me ayudo mucho
Yoelvis Mulen, excelente estoy iniciandome y me sirvio muchisimo esto que compartiste
muy buena explicacion me despejo varias dudas que tenia de css grid Saludos , + sub
Claro que te voy a dar un grandísimo like. Gracias por el video
muy bien explicado y tan sencillo, gracias !!!
Hola amigo yoelvis podría hacer un tutorial donde explique como implementar un método de pago a una página web de acuerdo ala moneda local del el país. Ejemplo: en peso, como puedo integrar, que la gente hagan pago a través de un banco local a la página web. porq todo el mundo lo hace es con paypal y lo quiero hacer con una moneda local gracias antemano si me puede ayudar, algo así como mercado pago en mercado libre