Índice de algunos temas tomados en la clase: 09:25 :Usando grid-template-colums 10:19 : Usando grid-template-rows 11:05 : Grid-gap: para poner espaciados 12:07 : Entendiendo estructura de CSS grid 13:08 : Qué es una grid explicita y una implicita 15:57 : Unidad fr
Que bárbaro! Explicas súper bien, con buen ritmo y tono de voz agradable, y te felicito por no estar rogando cada 5 minutos a que se suscriban a tu canal! Las animaciones que muestran tus redes y que solicitan la suscripción no son molestas 👏🏻👏🏻👏🏻
Gran contenido, vale la pena dedicarle el tiempo a las Grid, me encanta la propiedad gridGap para establecer el espacio entre los items basta de restar el margen en algunos lados o usar dentro de otro con padding para lograr el mismo efecto
Cuando parti con desarrollo web vi este curso y ahora que llevo un tiempo desarrollando vuelvo por que quiero usar grid en todos mis proyectos, gracias amigo!
Antes de continuar con Bootstrap, en el curso de diseño web de Udemy, y practicar con los nuevos vídeos de la semana anterior, es necesario entender y comprender CSS grid. Por esto le doy comienzo a este minicurso para seguir aprendiendo paso a paso y de la mejor forma. Como siempre, muchas gracias, Carlos por estos vídeos que nos enseñan muchísimo del diseño Web. Un saludo.
muy buen curso muy claro cuando explicas las cosas carlos arturo ....una sola acotacion es que la propiedad grid-gap ya quedo obsoleta, la cambiaron por gap nomas
hola. hoy inicio su curso. ya finalice el curso de google activate - aprender desarrollo web 1 y 2, si bien me sirvieron para comenzar desde cero. a la hora de armar una web me falta la parte de diseño. tengo la esperanza de poder alcanzar eso con este video. ademas, veo que van a utilizar el mismo archivo durante todo el video. lo que me pareció genial..
Arturo, estoy muy contento con tus cursos. Gracias a ti me voy a desarrollar en esta profesión. Has hecho que me encante gracias a tus buenísimas clases y a tu fácil e instructiva forma de enseñar. Un 10.
Muchas gracias por tu aporte. Quería comentarte que estoy en tu curso de udemy y es realmente expectacular. Solo faltaba CSS Grid. Sos un tremendo crack como explicas y todo lo que das ! Abrazo grande desde Argentina.
muchas gracias, practico y entendible. como consejo sobre el video te diria que hagas un zoom mas grande cuando escribes codigo asi es mas facil leerlo. DEDITO ARRIBA
No lo estropea, solamente te cambia como funciona un poco el modelo de caja. Te dejo un post donde explico porque pasa www.falconmasters.com/css/como-cambiar-modelo-de-caja-navegadores-box-sizing-css/
Hola Amigo, como estas ? necesito hacer un Header Flex, pero con 15 columnas, no 12.......me conviene boostrap o ccs gird ? Luego el Tbody en PHP....vos podrias guiarme para donde me encamino ? gracias !!!
Una duda, si dentro mi Header quiero posicionar otros elementos tengo que volver a usar css grid, si es asi como hago para que mi header se convierta en contenedor.
APUNTES: Para hacer que un div sea un grid, se usa display: grid; . Para declarar columnas se usa grid-template.columns: 100px 100px 100px; aquí estamos declarando 3 columnas. Una medida nueva de CSSgrid, es fr, si ponemos 1fr 1fr, se harán 2 columnas usando equitativamente el espacio restante del contenedor padre. si ponemos 1fr 2fr 1fr, sería por ejemplo 25% 50% 25%, lo mismo para cuando declaramos filas. Para declarar filas es con grid-template-rows: 1fr 1fr 1fr; Para hacer un margen entre las celdas usamos grid-gap: ; que ahora es solamente gap: ; el cual funciona igual de un margin pero este es especial para las celdas.
Hola Carlos, oye acualmente estoy en tu curso de desarrollo web en udemy y dado que en una sección esta una pequeña parte de flexbox no sé si saltarmela o no, ¿qué me recomiendas? Saludos.
Hola Falcon, eres un genio, en la actualidad estoy realizando cursos en udemy contigo, vi algo de css grid y lo realice en tu canal y es espectacular, gracias, si me gustaría hacer una pregunta de Css grid cuando definimos en grid-template-areas: tres columnas, después para responsive se puede redefinir y en grid-template-areas: poner dos columnas, muchas gracias de antemano
@@FalconMasters gracias pero ese no es el problema los estilos si me los agarran pero unos no en consola en elements style aparecen los estilos surrayados no los agarra ahhhh nose lloro necesito un profesor como tu ahhh
@@FalconMasters okey entiendo lo que pasa es que necesito hacer una pagina web responsive, he revisado al detalle tus cursos y me parecen que estan bien orientados, lo que pasa es que no se como hacer la parte responsiva si con diseño de columnas o flex box, en ese caso cual me podrias hacer el favor de recomendarme? Muchas gracias que pena la molestia
Para hacer una pagina responsive puedes hacerlo de muchas formas, puedes hacerlo con Flexbox, CSS Grid, hasta con float si eres de la vieja escuela. O si quieres evitar tener que crear todo el código CSS puedes hacerlo con bootstrap, que ya tiene el código hecho para que lo utilices y hagas sitios web responsive rápidos. Las 3 formas están bien hoy en día. Usa la que mas te guste ahora mismo.
gracias por el curso, lo estoy comenzando. pd: me queda la duda de por que usar un div con clase header y no usar un header directamente. gracias de todos modos
Hola Carlos. Muy interesante el curso por las actualizaciones, aun me sigo utilizando Flexbox pero siempre hay que estar al pendiente de las nuevas tecnologias. Y tengo una consulta, que tanto me recomiendas utitlizar algun framework o libreria como Angular, V o React para el frontend. ¿Los utilizas o trabajas con javascript puro (y/o ES6) y jquery?
Buenos días, que gran curso, ya pude tomarlo está mañana y obviamente me ha resultado muy útil. Me resulto peculiar una cosa, la forma en que sacas los 12 div con el comando o abreviación de div*12{$} ¿Cómo sabías de ese código? ¿Dónde puedo ver esos atajos? Me gustaría tener conocimiento sobre esto, si por favor me podrían colaborar. Muchas gracias!
Si te gusto el video dale manita arriba 👍
Que plugins usas en visual studio code?
Que tema es el que usas?
aportazo
@Allen Ray instablaster =)
Índice de algunos temas tomados en la clase:
09:25
:Usando grid-template-colums
10:19
: Usando grid-template-rows
11:05
: Grid-gap: para poner espaciados
12:07
: Entendiendo estructura de CSS grid
13:08
: Qué es una grid explicita y una implicita
15:57
: Unidad fr
Muchas gracias por tomarte el tiempo de compartir las anotaciones!
@@FalconMasters Gracias a ti por tomarte el tiempo de hacer estos videos
Los que usan visual studio code.
La propiedad grip-gap ya no se utiliza.
Fue reemplazada por solo gap.
Ejemplo:
.contenedor {
gap: 20px;
}
gracias, también aplica para atom
genial!! 😀😀
Que bárbaro! Explicas súper bien, con buen ritmo y tono de voz agradable, y te felicito por no estar rogando cada 5 minutos a que se suscriban a tu canal! Las animaciones que muestran tus redes y que solicitan la suscripción no son molestas 👏🏻👏🏻👏🏻
Muchas gracias!
Gran contenido, vale la pena dedicarle el tiempo a las Grid, me encanta la propiedad gridGap para establecer el espacio entre los items basta de restar el margen en algunos lados o usar dentro de otro con padding para lograr el mismo efecto
Es el mejor video que he visto sobre CSS grid. Un like no es suficiente para todo lo que quiero agradecerte.
¡Lo que luchaba uno antes con floats, diseño líquido, frameworks, etc! ¡Qué gran video!
Está loco! explicas demasiado bien, se nota que realmente disfrutas lo que haces! seguí así :)
De acuerdo contigo 👍👍👍
Cuando parti con desarrollo web vi este curso y ahora que llevo un tiempo desarrollando vuelvo por que quiero usar grid en todos mis proyectos, gracias amigo!
Sin duda el mejor profesor del que he aprendido algo
grid-gap fue reemplazado por gap, que funciona igual: gap{ 20px }
¿Gap añade siempre bajo el las filas ese ancho? siguiendo el curso veo que bajo la ultima fila me añade esa brecha de 20px. Gracias de antemano
gracias ángel, si note que algo no andaba bien !!
Antes de continuar con Bootstrap, en el curso de diseño web de Udemy, y practicar con los nuevos vídeos de la semana anterior, es necesario entender y comprender CSS grid. Por esto le doy comienzo a este minicurso para seguir aprendiendo paso a paso y de la mejor forma.
Como siempre, muchas gracias, Carlos por estos vídeos que nos enseñan muchísimo del diseño Web.
Un saludo.
Explica muy bien, se entiende mucho mas rápido la forma de exponer el tema. Realmente Muchas gracias
Ayer me puse a investigar sobre las grid, y justo hoy sacas este curso. ¡Muchas Gracias!
Espectacular el tema de las grid, demasiado útil y sencillo. Lo que más me gustó fue la unidad de medida FR, muy práctica también.
muy buen curso muy claro cuando explicas las cosas carlos arturo ....una sola acotacion es que la propiedad grid-gap ya quedo obsoleta, la cambiaron por gap nomas
Si es cierto
Ah esto me emociona, estaba haciendo un proyecto de desarrollo web y no sabia que hacer por que mis divs interiores se salian de mi contenedor
OFF tu contenido es sumamente genial, explica super bien hasta la mas mínima cosa,.
hola. hoy inicio su curso. ya finalice el curso de google activate - aprender desarrollo web 1 y 2, si bien me sirvieron para comenzar desde cero. a la hora de armar una web me falta la parte de diseño. tengo la esperanza de poder alcanzar eso con este video. ademas, veo que van a utilizar el mismo archivo durante todo el video. lo que me pareció genial..
ya he visto varios tutoriales tuyos, explicas demasiado bien y despejaste muchas dudas que tenía. Gracias de antemano me has ayudado mucho.
Arturo, estoy muy contento con tus cursos. Gracias a ti me voy a desarrollar en esta profesión. Has hecho que me encante gracias a tus buenísimas clases y a tu fácil e instructiva forma de enseñar. Un 10.
Muchas gracias Fernando, me da mucho gusto de verdad que mi contenido te sirva y aprendas mucho!
Muchas gracias por tu aporte. Quería comentarte que estoy en tu curso de udemy y es realmente expectacular. Solo faltaba CSS Grid. Sos un tremendo crack como explicas y todo lo que das ! Abrazo grande desde Argentina.
Muchas gracias Luciano, me alegra mucho escuchar que te guste mi curso. Saludos!
Ya esperando el 2do... Gracias por transmitir lo que sabes.
Mañana subiré otros 2.
Muy bueno el video Carlos Arthuro.
muchas gracias, practico y entendible. como consejo sobre el video te diria que hagas un zoom mas grande cuando escribes codigo asi es mas facil leerlo. DEDITO ARRIBA
Gracias, lo voy a tener en cuenta.
Gracias por tu tiempo, para compartir contenido de calidad
Gracias a ustedes por el apoyo a mis videos.
Gracias por enseñarnos Carlos Arturo
2021 y me salvaste la vida, te amo ❤.
que genialidad, en 4 propiedades te ahorra tanto trabajo
muchas gracias. Ahora sí a continuar con tu cruso de desarrollo web. Muchisimas gracias
Muy bueno el css grid, pendientes de ver!! like!
Por favor tengo una pregunta, intente usar box-sizing:border-box; y se me estropeo el css grid del video ¿Por qué pasa eso?
Gracias por el video.
No lo estropea, solamente te cambia como funciona un poco el modelo de caja.
Te dejo un post donde explico porque pasa
www.falconmasters.com/css/como-cambiar-modelo-de-caja-navegadores-box-sizing-css/
WoW!! una pasada... deja termino la practica de Diseñando mi portafolio y hago este cursazo :D
Genial! :D
muy recomendable tu canal falconcito! :)
eres un buen profesor gracias, explica muy bien
Gracias, no conocía el display:grid, sigo con el próximo!
MUCHAS GRACIAS por tus cursos, son excelentes y explicas muy bien... sigue adelante
Excelente video. Muchas gracias
A mi en sublime solo me funcionaba de esta manera la abreviatura del plugin Emmet div*12({$})
bien ahí
En brackets me pasaba igual. Gracias a ti lo he resuelto. Gracias!!
igual
Ya me enamoré de GRID
Geniales tus explicaciones!! Siempre miro tus videos y me sirven muchísimo!! sos super claro y didáctico. GRACIAS!!
Muchas gracias a ti por ver mis videos.
excelente demostracion... empiezo pa aclarar dudas q dejaron el menu avanzado tipo amazon.
Muy buen video, estoy siguiendo este curso, me gusta. Saludos! !
COMO TODO TUS VIDEO GENIAL..!!!
Buenos dias Carlos como estas? Te queria consultar los beneficios de CSS Grid con respecto a Flexbox? Gracias
Las ventajas nos permiten hacer layouts de sitios web mas fácilmente. Durante el curso lo muestro con ejemplos.
@@FalconMasters muchas gracias. Estaba viendo tu explicación de Flexbox y me encontré con CSS Grid así que estoy en la transición
@@leandrosaubiette33 Mi recomendacion es que veas ambos, los 2 se utilizan en conjunto muchas veces.
Perfecto, muchas gracias Carlos
16:09 minuto en el que me enamore de grid ♥
Hola Amigo, como estas ? necesito hacer un Header Flex, pero con 15 columnas, no 12.......me conviene boostrap o ccs gird ? Luego el Tbody en PHP....vos podrias guiarme para donde me encamino ? gracias !!!
gracias hermano, buen trabajo
Como siempre activado en tus videos falcon. Saludos!!!
Genial muchas gracias
Excelente explicación, eres todo un crack
Holis! Cómo haces que te funcione esa formula: div*12{$}? Es alguna extension de Vcode?
Hola Ana, si es con VS Code, por defecto, sin extensiones. Solo escribo esa formula y presiono la tecla TAB.
Tengo una duda con respecto a la herramienta para ver las grillas en chrome, lo busque por todos lados y no tiene, habrá que instalar una extensión?
Una duda, si dentro mi Header quiero posicionar otros elementos tengo que volver a usar css grid, si es asi como hago para que mi header se convierta en contenedor.
Genial , me encanto, una joya este video.
Hola una consulta cuando en mi codigo uso grid-template-rows
Grid-gap: no me lo actualiza enla pagina porque peude ser. SAludos
Excelente amigo y gracias!
Muy buen tutorial muchas gracias!! Excelente maestro!
Excelente. Recomendable como siempre. Gracias.
Hola buenas tardes una pregunta,grid vendria a hacer una alternativa a flexbox?
Gracias por el video. lo acabo de encontrar xD. Es mejor usar grid que flexbox? o solo es otro metodo?. conoces alguna desventaja de este?
Ambos son complemento del otro. Para crear layouts es mejor grid, y para alinear elementos flexbox.
@@FalconMasters Interesante. gracias.
gracias carlos me ayudaste bastante con todo tus cursos
Bien eh👏👏👏. Saludos!
Genial Carlos, buen material, espero los demas con ancias, muchas gracias.
muchas gracias gracias gracias por existir
Muchas gracias a ti por el apoyo a mis videos!
Excelente, Gracias nuevamente por compartir tus conocimientos
APUNTES:
Para hacer que un div sea un grid, se usa display: grid; . Para declarar columnas se usa grid-template.columns: 100px 100px 100px; aquí estamos declarando 3 columnas. Una medida nueva de CSSgrid, es fr, si ponemos 1fr 1fr, se harán 2 columnas usando equitativamente el espacio restante del contenedor padre. si ponemos 1fr 2fr 1fr, sería por ejemplo 25% 50% 25%, lo mismo para cuando declaramos filas.
Para declarar filas es con grid-template-rows: 1fr 1fr 1fr;
Para hacer un margen entre las celdas usamos grid-gap: ; que ahora es solamente gap: ; el cual funciona igual de un margin pero este es especial para las celdas.
Hola que tal!
Soy nueva en css grid.
Recomiendas primero que aprenda flexbox y luego css?
Espero que puedas responderme.
Hola, vi otro video tuyo sobre flexbox grid, ¿son diferentes? ¿Cuál es mejor?
Los dos se complementan, te recomendaría ver los dos, pero primero empezar por este curso.
Hola Carlos, oye acualmente estoy en tu curso de desarrollo web en udemy y dado que en una sección esta una pequeña parte de flexbox no sé si saltarmela o no, ¿qué me recomiendas? Saludos.
Hola Emiliano, yo te recomendaría tomar la sección, ya que flexbox se seguirá usando y mucho.
FANTASTICO!
Me encanto, yo me enamore del grid y del maestro
Hola Falcon, eres un genio, en la actualidad estoy realizando cursos en udemy contigo, vi algo de css grid y lo realice en tu canal y es espectacular, gracias, si me gustaría hacer una pregunta de Css grid cuando definimos en grid-template-areas: tres columnas, después para responsive se puede redefinir y en grid-template-areas: poner dos columnas, muchas gracias de antemano
Q buen curso muchas gracias
AYUDA HICE TODO AL PIE DE LA LETRA PERO EL NAVEGADOR NO ME QUISO LEER LOS ESTILOS PORQUE??? :´(
Seguramente tienes mal la ruta, mira este video:
th-cam.com/video/SvGBKBEEUt8/w-d-xo.html
@@FalconMasters gracias pero ese no es el problema los estilos si me los agarran pero unos no en consola en elements style aparecen los estilos surrayados no los agarra ahhhh nose lloro necesito un profesor como tu ahhh
@@fabianrivas5863 Si te aparecen subrayados entonces es porque tienes otros estilos que los están sobreescribiendo.
hola amigo,que editor de tecto utilizas ¿ atom quizas?
Utilizo Visual Studio Code
buenas noches, tengo una pregunta, css grid es lo mismo que boostrap?
No, son cosas diferentes. CSS Grid es un sistema de CSS y bootstrap es un framework.
@@FalconMasters okey entiendo lo que pasa es que necesito hacer una pagina web responsive, he revisado al detalle tus cursos y me parecen que estan bien orientados, lo que pasa es que no se como hacer la parte responsiva si con diseño de columnas o flex box, en ese caso cual me podrias hacer el favor de recomendarme? Muchas gracias que pena la molestia
Para hacer una pagina responsive puedes hacerlo de muchas formas, puedes hacerlo con Flexbox, CSS Grid, hasta con float si eres de la vieja escuela. O si quieres evitar tener que crear todo el código CSS puedes hacerlo con bootstrap, que ya tiene el código hecho para que lo utilices y hagas sitios web responsive rápidos. Las 3 formas están bien hoy en día. Usa la que mas te guste ahora mismo.
Excelente video tengo una pregunta para que funcione grip tengo que tener un archivo de nombre grip.ccs ?
Hola, no, el nombre del archivo no tiene nada que ver con el código.
Hola, una duda. ¿Es muy común ahora utilizar css grid?
Si, CSS Grid se volvió muy popular y se usa en la mayoría de sitios web.
Muchas gracias!
sos un genio explicando!!!
Fantastico!
Amigo tengo un problema, no me aparece el CSS GRID en medio de la página porque?
gracias por el curso, lo estoy comenzando.
pd: me queda la duda de por que usar un div con clase header y no usar un header directamente.
gracias de todos modos
Muy bien explicado, muchas gracias!!!!
Loco, te admiro; explicas bien!!!!
Hola Carlos. Muy interesante el curso por las actualizaciones, aun me sigo utilizando Flexbox pero siempre hay que estar al pendiente de las nuevas tecnologias. Y tengo una consulta, que tanto me recomiendas utitlizar algun framework o libreria como Angular, V o React para el frontend. ¿Los utilizas o trabajas con javascript puro (y/o ES6) y jquery?
@Oscar Fernando Gutierrez Lopez Gracias por el dato :)
Que genial gracias por enseñarnos
CSS GRID sustituye a Flexbox?
No, mas adelante en el curso explico algunos ejemplos en donde muestro porque no es un sustituto.
Gracias hermano bien explicado
Como veo la opcion "cuadricula" en google chrome?
Excelente :) Falcon consulta que capturador de pantalla usas ?
Uso Camtasia Studio
@@FalconMasters ok y gracias por tus aportes.
Las fr, hacen magia
Hice mii codigo tal cual el mostrado en el video pero a mi no se me colocan los elementos uno al lado del otro cuando creo columnas :(
El curso está buenísimo pero tengo una pregunta, como se llama el tema de VS que usas?
Ótima vídeo aula ✌.
Gran video
Gracias
Es flexible en cualquier navegador ie, opera? Edge? Chrome.. Mozilla?
creo que en internet explorer o como se llame ahora no
Esto es mejor que usar Bootstrap? O es sólo una forma diferente y ya?
Buen vídeo bro, realmente estaba confundido.
Buenos días, que gran curso, ya pude tomarlo está mañana y obviamente me ha resultado muy útil. Me resulto peculiar una cosa, la forma en que sacas los 12 div con el comando o abreviación de div*12{$} ¿Cómo sabías de ese código? ¿Dónde puedo ver esos atajos? Me gustaría tener conocimiento sobre esto, si por favor me podrían colaborar. Muchas gracias!