Índice de algunos temas vistos en el curso: 02:13 ¿En qué consiste grid areas? 05:42 Trabajando con grid areas 10:47 Colocando estilos a sidebar-1 12:42 Usando grid-column y grid-row (atajos de grid-column-start, grid-column-end y grid-row-start,grid-row-end) 13:27 Usando grid-area (atajo de grid-column + grid-row)
Brillante!! Empece con CSS y HTML hace 1 mes y con solo 5 videos de este curso de Grid siento que he dado un salto cuantico en mi aprendizaje! Mil gracias por explicarlo tan bien y tan sencillo. Si hay una propiedad de CSS a dominar 100% es GRID!!
Estaba tomando un curso en Udemy en el que nos enseñaban modificar los layouts shifters, pero no entendía muy bien lo de grid-template-areas. Este video es *ORO*. Muchas gracias.
Wow simplemente wow, vengo de crear un sitio web con floats y que dolor de cabeza, nada comparado con esto, simplifica mucho el trabajo, gracias FalconMasters me salió un día tu video de cuando utilizar grid y flexbox, me lo había estado saltando hasta que decidí verlo, sin duda valió la pena, tu canal en serio vale la pena, cabe recalcar que soy amateur, apenas estoy comenzando.
Que capo eres man, normalmente uso tutoriales para complementar lo que leo en páginas como CSS tricks o Freecodecamp, pero tu explicación es super completa. Sigue así :)
Gracias!! Con Flexbox y esto me termino de quemar las pestañas con posicionamientos casi imposibles, nunca me imaginé que iba a ser tan sencillo esto, ya era hora! Saludos!
estoy viendo el impacto que es usar grid es buenisimo para crear una buena estructura osea abtrarse de todo crear la estructura y maquillarlo a lo ultimo =) es genial!!! GRACIAS FALCOOOON!!!!!!!!!!!!!!!!
Me vinieron de 10 estos videos. Es medio confuso al principio, pero es mucho más organizado así que definir la estructura con flexbox (que por lo que he llegado a notar es más bien para la distribución en pantalla de elementos aglomerados). Compre tu curso en Udemy, y hasta ahora más que conforme. Saludos
Este tema de Grid me encantó! Súper bien explicado, sos un genio. Me sigue pasando igual...me descargué Mozilla Firefox para achicar pantalla, me quedan fuera los recuadros cuando achico...no sé porqué..si alguien me quiere ayudar genial . Gracias por compartir tus conocimientos Falcon
Estimado FalconMasters mi respeto y admiración a su trabajo la forma de enseñar es excelente, gracias por compartir sus conocimientos y experiencia siga asi maestro💻🧑💻
Tus videos son los mejores, aprendo de una manera super rápida!!!
4 ปีที่แล้ว
La grid área tengo que trabajarlo más en la práctica ya que hay bastante información de esto y es muy útil también. Seguimos aprendiendo a full, Falcon,
Halo Falcon me llamo Gonzalo saludos desde Uruguay , Tengo 15 años y me quiero dedicar a el desarrollo web, gracias a ti podre comenzar con mas facilidad los estudios para el próximo año 😄😊☺
@@Lagtcham También vengo de ese mismo curso, y estoy de acuerdo. La profesora no es la mejor explicando, dejó a medias el tema de Areas. Platzi tiene buenos profesores, es una pena la de Grid Layout no esté al nivel.
Tengo una pregunta, por ejemplo si en mi página web como header quisiera hacer un menú de navegación, tengo que agregar una lista y todo eso, pero ese menú y agregándole hover cuando paso el cursor por arriba de los elementos que conforman mi lista, sí pueden ir igual dentro de grid? o eso debería de ir independientemente fuera de la estructura de Grid?
Una pregunta si al nombrar las columnas qué están bien pero a la hora que le doy guardar todas las pone en una sola línea el css y difícil identificar las áreas es una configuración de visual studio?
He intentado llevar a la practica usar grid areas en una pagina web y me enredo mucho en la parte de colocar por ejemplo el header de mi pagina que tome todo el ancho y el container que tenga width de 1200px, por ejemplo. si hay un link por ahi como hacer eso, gracias
Gracias eres un crack, agradecería que hagas uso de diseño en banners responsive, para poder usarlo en proyectos, enserio muchas gracias eres muy bueno explicando.
No me quedo, pues una de las cajas me la hecho abajo, separandola de las demás, y la que lleva el nombre de contenido ya no tuvo el mismo tamaño, quedo más chica. Osea que no abarcaron el ancho del contenedor al final. El header, quedo bien. Los sidebar 1 y 2, también. El footer, igual. Pero la del contenido, quedo más chica, y la del widgets quedo flotando hacia abajo, fuera del contenedor. Ayuda!!
Y se lo usa al Grid para hacer el layout principal de las paginas? Vos Falcon lo usás para eso? O lo usas en secciones puntuales dentro de la web.. como por ejemplo una galería de imágenes o algo asi. O sea, entiendo que se puede usar para el layout, pero la pregunta es.. se lo usa? En las empresas lo usan de esa forma?
cuando escribo grid-template-rows: repeat(4, auto), el "auto" hace que en vez de agarrar dos filas el contenido, como figura en mi grid area, agarre solo una fila, y la parta a la mitad, es decir vale dos, pero en ese lugar la grilla se divide, y el tamaño es del tamaño del elemento, no de dos filas como se habia especificado; diferente es cuando pongo "1fr"
hola, buena tarde me surge un problema y es que al yo hacer un grid-template-areas no me reconoce sino una sola fila y he intentado de varias formas y no logro que me reconozca las otras filas
¡Muy bueno como siempre! Pregunta: en 16:55 comentas que podemos cambiarle el orden a los elementos como queramos, pero en el ejemplo que das lo haces en el HTML; la alternativa para no modificar el DOM, ¿sería definir grid-template-areas de nuevo con una media query?
hola amigo se que ha pasado mucho tiempo pero quisiera que me ayudaras en algo es que visual studio siempre que guardo reordena el código haciendo imposible hacer lo que tu haces ahí de colocar como en una forma te tablero las varias partes de la pagina si me ayudaras te agradecería mucho
Hola, primero gracias por tus videos, ayudan mucho a aprender esto del css, tenia muchas dudas con el manejo de este. Te queria preguntar, o al publico que lea esto, es que cuando coloco grid-gad el IDE me dice que es un codigo obsoleto. Queria preguntar si esta bien seguir usandolo o si hay algun codigo que lo reemplace. Saludos!
Hasta aqui llegué amigo, realmente han cambiado cosas y eso de tabular en css para crear una grilla manual me parecía demasiado cochino y actualmente ya no funciona. Creo que podrías hacer un mini-curso actualizado. Saludos bro.-
Que tal Falcon!! Oye tengo un problemon!! Hasta ahora he estado siguiendo tus tutoriales, pero en este capitulo en especifico comencé a tener problemas con firefox y css. Pasa que esta cargando el html normal sin los estilos que le doy en mi hoja Css, he intentado de todo y no doy con la solución. La pagina se muestra corectamente en otros navegadores (como venia trabajando en chrome) pero en mozilla no. y quiero usar mozilla en este momento para estudiar esto de las grid areas. por favor avisame que debo hacer gracias!
Hola Jose, ¿en otros navegadores si te cargan los estilos CSS? Si en ninguno te cargan entonces es que están mal enlazados. Te recomiendo que veas el código fuente de la pagina con F12 y busques donde están relacionados tus estilos css, te va aparecer un link al que puedes darle click. Si le das click y te envía a una pagina de error entonces es que la ruta esta mal y firefox no encuentra los estilos css, por eso no los carga.
@@FalconMasters bueno fijate que eso lo hice y al intentar seguir el link, me da error me dice que el recurso no está disponible (resource is not available). asi tengo mis links actualmente
@@josecabezas7341 Veo que tu ruta es algo compleja, te recomiendo acortarla y poner todo en minisculas. Ademsa veo que tienes un espacio en la carpeta Road Map, evita usar espacios.
no te parece que lo hiciste de una manera dificil, para colocar el tamaño los rows solo basta con usar grid-templeate-rows, en vez de declararlo en cada elemento
Como siempre, si te gusto el video dale manita arriba! 👍
El prpio pro
que crack
Índice de algunos temas vistos en el curso:
02:13
¿En qué consiste grid areas?
05:42
Trabajando con grid areas
10:47
Colocando estilos a sidebar-1
12:42
Usando grid-column y grid-row (atajos de grid-column-start, grid-column-end y grid-row-start,grid-row-end)
13:27
Usando grid-area (atajo de grid-column + grid-row)
Estoy arrancando con css y vengo a agradecerte fuertemente esta serie de videos, el ritmo es perfecto y los conceptos super claros!!
esxplota todos los recursos que puedas 💪
Brillante!! Empece con CSS y HTML hace 1 mes y con solo 5 videos de este curso de Grid siento que he dado un salto cuantico en mi aprendizaje! Mil gracias por explicarlo tan bien y tan sencillo.
Si hay una propiedad de CSS a dominar 100% es GRID!!
Estaba tomando un curso en Udemy en el que nos enseñaban modificar los layouts shifters, pero no entendía muy bien lo de grid-template-areas. Este video es *ORO*. Muchas gracias.
Wow simplemente wow, vengo de crear un sitio web con floats y que dolor de cabeza, nada comparado con esto, simplifica mucho el trabajo, gracias FalconMasters me salió un día tu video de cuando utilizar grid y flexbox, me lo había estado saltando hasta que decidí verlo, sin duda valió la pena, tu canal en serio vale la pena, cabe recalcar que soy amateur, apenas estoy comenzando.
Muchas gracias, me alegra mucho que te sirviera!
Geniooooooooooooooooo !!!! más claro échale agua papá... mis mas sinceras felicitaciones de verdad aportas muchísimo......
Que capo eres man, normalmente uso tutoriales para complementar lo que leo en páginas como CSS tricks o Freecodecamp, pero tu explicación es super completa. Sigue así :)
Gracias!! Con Flexbox y esto me termino de quemar las pestañas con posicionamientos casi imposibles, nunca me imaginé que iba a ser tan sencillo esto, ya era hora! Saludos!
estoy viendo el impacto que es usar grid es buenisimo para crear una buena estructura osea abtrarse de todo crear la estructura y maquillarlo a lo ultimo =) es genial!!! GRACIAS FALCOOOON!!!!!!!!!!!!!!!!
me parece genial que inicies con lo que se ha visto en todos los videos , de esta forma se graba muy facilmente....gracias MASTER!!
Me vinieron de 10 estos videos. Es medio confuso al principio, pero es mucho más organizado así que definir la estructura con flexbox (que por lo que he llegado a notar es más bien para la distribución en pantalla de elementos aglomerados). Compre tu curso en Udemy, y hasta ahora más que conforme. Saludos
Me ha fascinado este capítulo. Contigo entendí mucho. Gracias Falcon
Muy bien explicado.
a seguir generando contenido que ayudas a muchas personas!
Cada vez me sorprenden más tus cursos y practicas, sigue así nunca cambies.
Gracias
Este tema de Grid me encantó! Súper bien explicado, sos un genio. Me sigue pasando igual...me descargué Mozilla Firefox para achicar pantalla, me quedan fuera los recuadros cuando achico...no sé porqué..si alguien me quiere ayudar genial . Gracias por compartir tus conocimientos Falcon
Estimado FalconMasters mi respeto y admiración a su trabajo la forma de enseñar es excelente, gracias por compartir sus conocimientos y experiencia siga asi maestro💻🧑💻
tantos videos que he visto sobre este tema, nunca lo había entendido hasta este momento, fantástico video, me siento megamente en este momento XD
Me alegra mucho escuchar eso!
Che, es impresionante lo bien que explicás.
Gracias!
me esta gustando mucho como explicas realmente tienes talento
Me encanta lo de CSS Grid, me hace sentir muy conforme, muchas gracias!
Excelente Carlos, vengo de tu curso de udemy!
Maravilloso. No más dolores de cabeza
Tus videos son los mejores, aprendo de una manera super rápida!!!
La grid área tengo que trabajarlo más en la práctica ya que hay bastante información de esto y es muy útil también. Seguimos aprendiendo a full, Falcon,
Falcón Senpai!! Me compre tu curso de Udemy y está genial. Saludos, espero que nos eseñes más por TH-cam
Muchas gracias
Y claro que si, seguiré haciendo videos y cursos.
Uno de java script
Te amo FalconMasters!!!!
Gracias !!! muy bunas clases, y muy bien explicadas!
Halo Falcon me llamo Gonzalo saludos desde Uruguay , Tengo 15 años y me quiero dedicar a el desarrollo web, gracias a ti podre comenzar con mas facilidad los estudios para el próximo año 😄😊☺
Mucha suerte!
@@FalconMasters Gracias, igual para ti
me ha gustado mucho este curso de CSSGRID
Gracias por compartir tus conocimientos.
wn yo pague un curso culiao en platzi y son como el culo pa explicar, y vo wn me dejaste espectacular.
Jajajajajjajajaja X2
yo también vengo de platzi, el problema no es platzi es la profesora que utiliza un método ineficiente para enseñar xd
@@Lagtcham También vengo de ese mismo curso, y estoy de acuerdo. La profesora no es la mejor explicando, dejó a medias el tema de Areas. Platzi tiene buenos profesores, es una pena la de Grid Layout no esté al nivel.
@Wicho Pianist El de Leonidas estaba bueno y lo cambiaron por uno más culero.
ahhhhhhhhh que chevere :D, tuve que ver 2 veces esto: 17:26 para entender que habías hecho xD
Falcon Master eres god!!!!!!!!! Gracias por todo este conocimiento :)
muy bien explicado muchas gracias
Tengo una pregunta, por ejemplo si en mi página web como header quisiera hacer un menú de navegación, tengo que agregar una lista y todo eso, pero ese menú y agregándole hover cuando paso el cursor por arriba de los elementos que conforman mi lista, sí pueden ir igual dentro de grid? o eso debería de ir independientemente fuera de la estructura de Grid?
Una pregunta si al nombrar las columnas qué están bien pero a la hora que le doy guardar todas las pone en una sola línea el css y difícil identificar las áreas es una configuración de visual studio?
GENIAL!!!! Gracias por tu dedicación!
He intentado llevar a la practica usar grid areas en una pagina web y me enredo mucho en la parte de colocar por ejemplo el header de mi pagina que tome todo el ancho y el container que tenga width de 1200px, por ejemplo. si hay un link por ahi como hacer eso, gracias
hola falco commo estas para ponerle el nobre e area en chrome,podrias decirme?
Eres un crack, muchas gracias por compartir
Miclovin eres el mejor
Claro que me gusto el video eres el mejor super bien explicado muchas gracias
Muchas gracias
Eres una inspiración bro
Gracias Falcon excelente trabajo!! :D
Al ver toda la lista del curso quedé con la sensación que faltó la práctica que aqui hablaste (18:15), de casualidad la tienes en otro video?
Gracias eres un crack, agradecería que hagas uso de diseño en banners responsive, para poder usarlo en proyectos, enserio muchas gracias eres muy bueno explicando.
No me quedo, pues una de las cajas me la hecho abajo, separandola de las demás, y la que lleva el nombre de contenido ya no tuvo el mismo tamaño, quedo más chica.
Osea que no abarcaron el ancho del contenedor al final.
El header, quedo bien.
Los sidebar 1 y 2, también.
El footer, igual.
Pero la del contenido, quedo más chica, y la del widgets quedo flotando hacia abajo, fuera del contenedor.
Ayuda!!
Y se lo usa al Grid para hacer el layout principal de las paginas? Vos Falcon lo usás para eso? O lo usas en secciones puntuales dentro de la web.. como por ejemplo una galería de imágenes o algo asi. O sea, entiendo que se puede usar para el layout, pero la pregunta es.. se lo usa? En las empresas lo usan de esa forma?
cuando escribo grid-template-rows: repeat(4, auto), el "auto" hace que en vez de agarrar dos filas el contenido, como figura en mi grid area, agarre solo una fila, y la parta a la mitad, es decir vale dos, pero en ese lugar la grilla se divide, y el tamaño es del tamaño del elemento, no de dos filas como se habia especificado; diferente es cuando pongo "1fr"
#FalconMasters
Cual es el nombre del tema que utilizas en VS Code?
Por cierto, estoy agradecido por tu enseñanza, sigue así
como se llama esa herramienta que el saca en la parte inferior blanca , ?
Como puedo poner un fondo de color que sea mas grande que su contenedor?
hola, buena tarde me surge un problema y es que al yo hacer un grid-template-areas no me reconoce sino una sola fila y he intentado de varias formas y no logro que me reconozca las otras filas
Una pregunta, en el rubro profesional se utiliza el "Grid-template-areas" ? porque me parece mas comodo usar el del otro modo.
adáptate, no te atrases en las formas de trabajar
16:26 Hermoso🤩🤩
Gracias por el video, me esta ayudando y estoy aprendiendo bastante c:
¡Muy bueno como siempre!
Pregunta: en 16:55 comentas que podemos cambiarle el orden a los elementos como queramos, pero en el ejemplo que das lo haces en el HTML; la alternativa para no modificar el DOM, ¿sería definir grid-template-areas de nuevo con una media query?
Así es, con grid-template lo puedes hacer.
hola amigo se que ha pasado mucho tiempo pero quisiera que me ayudaras en algo es que visual studio siempre que guardo reordena el código haciendo imposible hacer lo que tu haces ahí de colocar como en una forma te tablero las varias partes de la pagina si me ayudaras te agradecería mucho
desinstala tus exenciones una de ellas debe ser, me pasó lo mismo y borre todas, luego instale solo las que necesitaba.
@@freddymoya3151 gracias amigo
Muy amplio tu contenido me preguntaba como hago para modificar el idioma de mi "herramientas para desarrolladores", saludos!
Eso ha de estar relacionado al idioma de tu navegador web.
con @soydalto es tipo aprender conceptos y contigo es aplicar lo aprendido mano, excelente curso uwu
¿Como le pongo una imagen de fondo a un elemento del grid?
Hola, primero gracias por tus videos, ayudan mucho a aprender esto del css, tenia muchas dudas con el manejo de este.
Te queria preguntar, o al publico que lea esto, es que cuando coloco grid-gad el IDE me dice que es un codigo obsoleto. Queria preguntar si esta bien seguir usandolo o si hay algun codigo que lo reemplace.
Saludos!
El grid-gad ya no se usa, se usa el gad nada mas tanto para flexbox como para grid.
eres mi idolo!!!
Que buen tutorial!
Gracias!
Muy buenos vídeos. Tengo un problema cuando pongo los 3 header me salen en vertical (divs 1,4 y 7) y no en horizontal y no se por qué. Gracias
Tal vez pusiste "rows" en vez de "colunms" 🤷♂️
Como seria si yo quisiera en el header poner un menu? como home contacto etc.
Solo soy uno más queriendo aprender de Falcon, pero eso suena bastante fácil. Ya que le puedes poner un "article", "span", etc.
primero geniales los videos, segundo como se llama la extension para ver la grid en "inspeccionar"
Muchas gracias, no es ninguna extensión, es una función del propio firefox.
gracias
Tarde pero seguro :) #falconMasters
muy bueno
Muy buen video 👍
Hasta aqui llegué amigo, realmente han cambiado cosas y eso de tabular en css para crear una grilla manual me parecía demasiado cochino y actualmente ya no funciona. Creo que podrías hacer un mini-curso actualizado. Saludos bro.-
Felicitaciones
Estoy aprendiendo Grid y estuve 2hs gritándole a una grilla antes de ver este video
Alguno sabe como activar la visibilidad del grid y las areas en el navegador microsoft edge? gracias
existe alguna extension en chrome para poder visualizarlo asi?
Chrome también tiene en las herramientas de desarrollador algo asi. Yo nunca la he usado, pero si conozco que tiene una.
como se llama el tema que utilizas en tu Visual Code?
Se llama Ayu con su versión "Mirage"
@@FalconMasters muchas gracias 😸
Que tal Falcon!! Oye tengo un problemon!! Hasta ahora he estado siguiendo tus tutoriales, pero en este capitulo en especifico comencé a tener problemas con firefox y css. Pasa que esta cargando el html normal sin los estilos que le doy en mi hoja Css, he intentado de todo y no doy con la solución. La pagina se muestra corectamente en otros navegadores (como venia trabajando en chrome) pero en mozilla no. y quiero usar mozilla en este momento para estudiar esto de las grid areas. por favor avisame que debo hacer gracias!
Hola Jose, ¿en otros navegadores si te cargan los estilos CSS? Si en ninguno te cargan entonces es que están mal enlazados.
Te recomiendo que veas el código fuente de la pagina con F12 y busques donde están relacionados tus estilos css, te va aparecer un link al que puedes darle click. Si le das click y te envía a una pagina de error entonces es que la ruta esta mal y firefox no encuentra los estilos css, por eso no los carga.
@@FalconMasters bueno fijate que eso lo hice y al intentar seguir el link, me da error me dice que el recurso no está disponible (resource is not available).
asi tengo mis links actualmente
@@josecabezas7341 Veo que tu ruta es algo compleja, te recomiendo acortarla y poner todo en minisculas. Ademsa veo que tienes un espacio en la carpeta Road Map, evita usar espacios.
También te recomiendo ver este video para que veas como acomodar los estilos CSS.
th-cam.com/video/SvGBKBEEUt8/w-d-xo.html
@@FalconMasters Listo Falcon! Estuve leyendo por alli y de acuerdo a ello el llamado a archivos locales de css deben comenzar por "file". ejemplo
cuando pongo header tres veces no veo ningun cambio a que se debe?
me pasa lo mismo en la segunda y tercera relacion
@@No_te_jales no aparecía porque falcón utilizaba el firefox para desarrolladores pues lo instale y ya esta genial
grid es lo mejor q le paso a css? (?
GENIO
Le puedes hacer lo que tú quieras 7w7 17:50
♪ Marvin Gaye - Let's Get It On ♫
17:50 D:
:O
grid-template-areas: "header" ;
Este método me confundió un poquito, pero supongo que con práctica será mucho más sencillo.
Así sera :)
no sé por qué el contenido lo pone afuera
✔✔✔
no te parece que lo hiciste de una manera dificil, para colocar el tamaño los rows solo basta con usar grid-templeate-rows, en vez de declararlo en cada elemento
hola, segundo comentario
Primer comentario
hola, tercer comentario
bro, creo q me enamoré :v
Oye eres el que mejor enseña la programación
que sintaxis tan rara
Muy buena explicación.Gracias por enseñar.
Gracias