Í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
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
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
4 ปีที่แล้ว
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.
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, 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
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.
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.
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
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!
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 buen vídeo, me sorprende tu voz, es parecida a uno de los actores de doblaje, que es el que hace la voz de simba, si no me equivoco :) pero igualemnte, tu voz se me asemeja mucho a los actores de doblaje, dejando esto atrás, mil gracias por el video.
Falcon desde que estoy en la universidad veo tus videos, ya tengo casi 6 años trabajando como programador, me gustaría hacerte alguna donación, siempre me salvan tus videos cuando necesito repasar alguna cosa de frontEnd, como podría hacerlo?
Hola Jose, me alegran mucho que te sirvan mis videos, eso es fantástico! Aprecio mucho tu gesto, pero no es necesario que me hagas una donación, yo ya obtengo ingresos de youtube y también vendiendo mis cursos en Udemy, en dado caso si lo deseas puedes adquirir alguno de mis cursos desde allí. Te mando un gran saludo!
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 !!!
Como siempre excelente!. Yo hacía los layouts con flexbox pero vi que es mejor grid. En el curso de diseño web profesional de udemy enseñas estos de grid? Es que no los encuentro 😢 Edit* ya leí el archivo acerca del curso de css grid 😢😂 seguiré viendo los de youtube
Me alegra que te sirviera, este curso no lo incluí en el de diseño web porque esta aquí gratis, pero voy a actualizar el curso con nuevas secciones y proyectos.
Muy buena la clase gracias Maestro, hay algo que me marea un poco , perdón si la pregunta es algo tonta me confunde mucho al parecer FlexBox y CssGrid hacen lo mismo? Cuando debo aplicar uno y cuando el otro, me marea esta parte no se donde aplicar cada uno Muchas gracias por los comentarios
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 =)
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!! 😀😀
Í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
Está loco! explicas demasiado bien, se nota que realmente disfrutas lo que haces! seguí así :)
De acuerdo contigo 👍👍👍
Es el mejor video que he visto sobre CSS grid. Un like no es suficiente para todo lo que quiero agradecerte.
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 !!
¡Lo que luchaba uno antes con floats, diseño líquido, frameworks, etc! ¡Qué gran video!
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
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
Explica muy bien, se entiende mucho mas rápido la forma de exponer el tema. Realmente Muchas gracias
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!
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.
Ayer me puse a investigar sobre las grid, y justo hoy sacas este curso. ¡Muchas Gracias!
OFF tu contenido es sumamente genial, explica super bien hasta la mas mínima cosa,.
ya he visto varios tutoriales tuyos, explicas demasiado bien y despejaste muchas dudas que tenía. Gracias de antemano me has ayudado mucho.
Sin duda el mejor profesor del que he aprendido algo
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.
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
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 esperando el 2do... Gracias por transmitir lo que sabes.
Mañana subiré otros 2.
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!
Gracias por tu tiempo, para compartir contenido de calidad
Gracias a ustedes por el apoyo a mis videos.
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.
muchas gracias. Ahora sí a continuar con tu cruso de desarrollo web. Muchisimas gracias
2021 y me salvaste la vida, te amo ❤.
Gracias, no conocía el display:grid, sigo con el próximo!
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.
Muy bueno el video Carlos Arthuro.
Gracias por enseñarnos Carlos Arturo
MUCHAS GRACIAS por tus cursos, son excelentes y explicas muy bien... sigue adelante
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!
muy recomendable tu canal falconcito! :)
eres un buen profesor gracias, explica muy bien
que genialidad, en 4 propiedades te ahorra tanto trabajo
Muy bueno el css grid, pendientes de ver!! like!
Excelente. Recomendable como siempre. Gracias.
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.
WoW!! una pasada... deja termino la practica de Diseñando mi portafolio y hago este cursazo :D
Genial! :D
gracias carlos me ayudaste bastante con todo tus cursos
Excelente video. Muchas gracias
FANTASTICO!
Ya me enamoré de GRID
Excelente, Gracias nuevamente por compartir tus conocimientos
Genial , me encanto, una joya este video.
excelente demostracion... empiezo pa aclarar dudas q dejaron el menu avanzado tipo amazon.
16:09 minuto en el que me enamore de grid ♥
Excelente amigo y gracias!
Muy buen video, estoy siguiendo este curso, me gusta. Saludos! !
Excelente explicación, eres todo un crack
Como siempre activado en tus videos falcon. Saludos!!!
Genial muchas gracias
COMO TODO TUS VIDEO GENIAL..!!!
gracias hermano, buen trabajo
Genial Carlos, buen material, espero los demas con ancias, muchas gracias.
Muy buen tutorial muchas gracias!! Excelente maestro!
Fantastico!
Muchas gracias!
Bien eh👏👏👏. Saludos!
Me encanto, yo me enamore del grid y del maestro
muchas gracias gracias gracias por existir
Muchas gracias a ti por el apoyo a mis videos!
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
sos un genio explicando!!!
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
Muy bien explicado, muchas gracias!!!!
Loco, te admiro; explicas bien!!!!
Que genial gracias por enseñarnos
Q buen curso muchas gracias
Muchas Gracias
alla vamos x2!
Gracias hermano bien explicado
excelente, muchas gracias!
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!
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
Gran video
Gracias
Las fr, hacen magia
mucho mejor que usar flex floats y porcentajes
muy interesante
Buen vídeo bro, realmente estaba confundido.
Entiendoooo
Muy buen vídeo, me sorprende tu voz, es parecida a uno de los actores de doblaje, que es el que hace la voz de simba, si no me equivoco :) pero igualemnte, tu voz se me asemeja mucho a los actores de doblaje, dejando esto atrás, mil gracias por el video.
Gracias, es curioso creo que mi voz si se parece a la de algunos actores de doblaje :P
Falcon desde que estoy en la universidad veo tus videos, ya tengo casi 6 años trabajando como programador, me gustaría hacerte alguna donación, siempre me salvan tus videos cuando necesito repasar alguna cosa de frontEnd, como podría hacerlo?
Hola Jose, me alegran mucho que te sirvan mis videos, eso es fantástico!
Aprecio mucho tu gesto, pero no es necesario que me hagas una donación, yo ya obtengo ingresos de youtube y también vendiendo mis cursos en Udemy, en dado caso si lo deseas puedes adquirir alguno de mis cursos desde allí.
Te mando un gran saludo!
Ótima vídeo aula ✌.
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/
el color del minuto 5:39 para que lo copien : #2f89fc.
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.
Los veo en la tele y le doy like por el móvil 😅
Esto facilitar mucho las cosas jaja
Te recomiendo usar live server para que no estés actualizando manualmente
muy bueno, lanzas el comando live-server en tu carpeta y listo. (instalen node.js)
excelente, me gusto mucho :)
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
Hola que tal!
Soy nueva en css grid.
Recomiendas primero que aprenda flexbox y luego css?
Espero que puedas responderme.
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 !!!
Hola buenas tardes una pregunta,grid vendria a hacer una alternativa a flexbox?
El curso está buenísimo pero tengo una pregunta, como se llama el tema de VS que usas?
Como siempre excelente!. Yo hacía los layouts con flexbox pero vi que es mejor grid.
En el curso de diseño web profesional de udemy enseñas estos de grid? Es que no los encuentro 😢
Edit* ya leí el archivo acerca del curso de css grid 😢😂 seguiré viendo los de youtube
Me alegra que te sirviera, este curso no lo incluí en el de diseño web porque esta aquí gratis, pero voy a actualizar el curso con nuevas secciones y proyectos.
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.
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.
Muy buena la clase gracias Maestro, hay algo que me marea un poco , perdón si la pregunta es algo tonta
me confunde mucho al parecer FlexBox y CssGrid hacen lo mismo?
Cuando debo aplicar uno y cuando el otro, me marea esta parte no se donde aplicar cada uno
Muchas gracias por los comentarios
Pueden usarse para lo mismo, pero son diferentes, durante el curso lo voy explicando.
@@FalconMasters ok muchas gracias por la respuesta si me parecería que hacen casi lo mismo
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.
Como aclaración, esa función que hace que aparezcan las lineas punteadas no aparece en Chrome, solo en firefox. Buen vídeo.