Curso de CSS GRID: 1.- Primeros pasos y Creando Nuestra Primera Grid

[@FalconMasters]

Si te gusto el video dale manita arriba 👍

[@vitrollers]

Que plugins usas en visual studio code?

[@MarioMartinez-pj4iy]

Que tema es el que usas?

[@kevinpaolini9710]

aportazo

[@aidengrayson4056]

@Allen Ray instablaster =)

[@josedanieldavila44]

Los que usan visual studio code. La propiedad grip-gap ya no se utiliza. Fue reemplazada por solo gap. Ejemplo: .contenedor { gap: 20px; }

[@jcastillog]

gracias, también aplica para atom

[@DogHack88]

genial!! 😀😀

[@AlbertoMartinez-ru7nk]

Í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

[@FalconMasters]

Muchas gracias por tomarte el tiempo de compartir las anotaciones!

[@danilomereles6671]

@@FalconMasters Gracias a ti por tomarte el tiempo de hacer estos videos

[@MoisesCastillo-j2w]

Es el mejor video que he visto sobre CSS grid. Un like no es suficiente para todo lo que quiero agradecerte.

[@carlosurtubia8265]

Sin duda el mejor profesor del que he aprendido algo

[@genarobarrerovilla6391]

Explica muy bien, se entiende mucho mas rápido la forma de exponer el tema. Realmente Muchas gracias

[@karendn20]

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

[@FalconMasters]

Muchas gracias!

[@ignacio1531]

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

[@bernardoagustinstefanoni4257]

Está loco! explicas demasiado bien, se nota que realmente disfrutas lo que haces! seguí así :)

[@danielanticona6419]

De acuerdo contigo 👍👍👍

[@carlosjosec8946]

OFF tu contenido es sumamente genial, explica super bien hasta la mas mínima cosa,.

[@jbaigorria0]

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

[@mood9081]

Si es cierto

[@innovacity]

¡Lo que luchaba uno antes con floats, diseño líquido, frameworks, etc! ¡Qué gran video!

[@gabrielturrillas]

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!

[@WizraiderRD]

grid-gap fue reemplazado por gap, que funciona igual: gap{ 20px }

[@antunez19]

¿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

[@jevar4502]

gracias ángel, si note que algo no andaba bien !!

[@francopezzelatto]

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

[@josedanieldavila44]

Muy bueno el video Carlos Arthuro.

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.

[@kronoskalifa]

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.

[@gilbertomartinez7711]

ya he visto varios tutoriales tuyos, explicas demasiado bien y despejaste muchas dudas que tenía. Gracias de antemano me has ayudado mucho.

[@Alexey_IV]

2021 y me salvaste la vida, te amo ❤.

[@javierperez-ok1fy]

Muy bueno el css grid, pendientes de ver!! like!

[@heisst]

Ayer me puse a investigar sobre las grid, y justo hoy sacas este curso. ¡Muchas Gracias!

[@javiermendoza1357]

Gracias por enseñarnos Carlos Arturo

[@code_castle]

Ya esperando el 2do... Gracias por transmitir lo que sabes.

[@FalconMasters]

Mañana subiré otros 2.

[@fernanolmedof]

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.

[@FalconMasters]

Muchas gracias Fernando, me da mucho gusto de verdad que mi contenido te sirva y aprendas mucho!

[@allenciber9438]

eres un buen profesor gracias, explica muy bien

[@sparda2.061]

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

[@urielrodriguezruiz]

Gracias por tu tiempo, para compartir contenido de calidad

[@FalconMasters]

Gracias a ustedes por el apoyo a mis videos.

[@cosmicblack]

muchas gracias. Ahora sí a continuar con tu cruso de desarrollo web. Muchisimas gracias

[@emiliosdev]

Muy buen video, estoy siguiendo este curso, me gusta. Saludos! !

[@grbsql]

Excelente video. Muchas gracias

[@lucianodagostino2285]

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.

[@FalconMasters]

Muchas gracias Luciano, me alegra mucho escuchar que te guste mi curso. Saludos!

[@exsze]

muy recomendable tu canal falconcito! :)

[@nolan7798]

Genial , me encanto, una joya este video.

[@gabrielmunoz2659]

MUCHAS GRACIAS por tus cursos, son excelentes y explicas muy bien... sigue adelante

[@propts2953]

Excelente explicación, eres todo un crack

[@pabloagustinvera9889]

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

[@FalconMasters]

Gracias, lo voy a tener en cuenta.

[@camilocadavid4935]

gracias hermano, buen trabajo

[@danielanticona6419]

Bien eh👏👏👏. Saludos!

[@dalifarol124]

COMO TODO TUS VIDEO GENIAL..!!!

[@joseca684]

WoW!! una pasada... deja termino la practica de Diseñando mi portafolio y hago este cursazo :D

[@FalconMasters]

Genial! :D

[@developer1328]

que genialidad, en 4 propiedades te ahorra tanto trabajo

[@redvers_ev]

Gracias, no conocía el display:grid, sigo con el próximo!

[@jlsanchez005]

excelente demostracion... empiezo pa aclarar dudas q dejaron el menu avanzado tipo amazon.

[@karenclavio5052]

Geniales tus explicaciones!! Siempre miro tus videos y me sirven muchísimo!! sos super claro y didáctico. GRACIAS!!

[@FalconMasters]

Muchas gracias a ti por ver mis videos.

[@eutickdesign1192]

Como siempre activado en tus videos falcon. Saludos!!!

[@FalconMasters]

Genial muchas gracias

[@brayansotomayor196]

gracias carlos me ayudaste bastante con todo tus cursos

[@CompositeNation]

Muy buen tutorial muchas gracias!! Excelente maestro!

[@abelsilvasantacruz9584]

16:09 minuto en el que me enamore de grid ♥

[@JaimieVega]

Excelente, Gracias nuevamente por compartir tus conocimientos

[@hera8558]

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.

[@lrayze]

Excelente. Recomendable como siempre. Gracias.

[@jesusjosecastelli7729]

Me encanto, yo me enamore del grid y del maestro

[@ftwtf]

A mi en sublime solo me funcionaba de esta manera la abreviatura del plugin Emmet div*12({$})

[@singulardeveloper9808]

bien ahí

[@fernanolmedof]

En brackets me pasaba igual. Gracias a ti lo he resuelto. Gracias!!

[@fernandoduarte6213]

igual

[@oscarrkingsley]

Ya me enamoré de GRID

[@stanmann2229]

Excelente amigo y gracias!

Genial Carlos, buen material, espero los demas con ancias, muchas gracias.

[@cesaraugustopachecoariza4528]

Q buen curso muchas gracias

[@todounpoco1611]

muchas gracias gracias gracias por existir

[@FalconMasters]

Muchas gracias a ti por el apoyo a mis videos!

[@leandrosaubiette33]

Buenos dias Carlos como estas? Te queria consultar los beneficios de CSS Grid con respecto a Flexbox? Gracias

[@FalconMasters]

Las ventajas nos permiten hacer layouts de sitios web mas fácilmente. Durante el curso lo muestro con ejemplos.

[@leandrosaubiette33]

@@FalconMasters muchas gracias. Estaba viendo tu explicación de Flexbox y me encontré con CSS Grid así que estoy en la transición

[@FalconMasters]

@@leandrosaubiette33 Mi recomendacion es que veas ambos, los 2 se utilizan en conjunto muchas veces.

[@leandrosaubiette33]

Perfecto, muchas gracias Carlos

[@mariajosebarrera6363]

sos un genio explicando!!!

[@jaimeviloriogreen]

Loco, te admiro; explicas bien!!!!

[@chochisnager]

Muy bien explicado, muchas gracias!!!!

[@JavierRuiz-ub3mm]

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

[@edgar5166]

Muchas gracias!

[@anag2125]

Holis! Cómo haces que te funcione esa formula: div*12{$}? Es alguna extension de Vcode?

[@FalconMasters]

Hola Ana, si es con VS Code, por defecto, sin extensiones. Solo escribo esa formula y presiono la tecla TAB.

[@analourdescaballero7223]

Que genial gracias por enseñarnos

[@Marnytopia]

Hola, vi otro video tuyo sobre flexbox grid, ¿son diferentes? ¿Cuál es mejor?

[@FalconMasters]

Los dos se complementan, te recomendaría ver los dos, pero primero empezar por este curso.

[@oremet47844]

Gracias hermano bien explicado

[@Kain20XX]

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?

[@FalconMasters]

Ambos son complemento del otro. Para crear layouts es mejor grid, y para alinear elementos flexbox.

[@Kain20XX]

@@FalconMasters Interesante. gracias.

[@pythonmaker]

FANTASTICO!

[@federiconarduzzi2849]

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

[@romuloalves9349]

Ótima vídeo aula ✌.

[@DiegoMaximilianoGiles]

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

[@ivanleiva9651]

Hola buenas tardes una pregunta,grid vendria a hacer una alternativa a flexbox?

[@fabiancastillo2928]

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!

[@kcardmeen12lol18]

el color del minuto 5:39 para que lo copien : #2f89fc.

[@jhulls2056]

Fantastico!

[@vanechick]

excelente, muchas gracias!

[@yonsidchaca990]

Excelente video tengo una pregunta para que funcione grip tengo que tener un archivo de nombre grip.ccs ?

[@FalconMasters]

Hola, no, el nombre del archivo no tiene nada que ver con el código.

[@guerrerocamachofrida7074]

Hola que tal! Soy nueva en css grid. Recomiendas primero que aprenda flexbox y luego css? Espero que puedas responderme.

[@franco26978]

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?

[@emilianolunageorge1156]

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.

[@FalconMasters]

Hola Emiliano, yo te recomendaría tomar la sección, ya que flexbox se seguirá usando y mucho.

[@eribertmarquez452]

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.

[@FalconMasters]

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/

[@mariadanielavs9879]

Los veo en la tele y le doy like por el móvil 😅

[@Nataliaestuvoaqui]

Hola, una duda. ¿Es muy común ahora utilizar css grid?

[@FalconMasters]

Si, CSS Grid se volvió muy popular y se usa en la mayoría de sitios web.

[@TheTokizforever]

buenas noches, tengo una pregunta, css grid es lo mismo que boostrap?

[@FalconMasters]

No, son cosas diferentes. CSS Grid es un sistema de CSS y bootstrap es un framework.

[@TheTokizforever]

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

[@FalconMasters]

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.

[@leandromorillo4405]

Buen vídeo bro, realmente estaba confundido.

[@ivandez1811]

mucho mejor que usar flex floats y porcentajes

[@cristiansolano9960]

El curso está buenísimo pero tengo una pregunta, como se llama el tema de VS que usas?

[@robertto1ify]

CSS GRID sustituye a Flexbox?

[@FalconMasters]

No, mas adelante en el curso explico algunos ejemplos en donde muestro porque no es un sustituto.

[@mariogustavosanchez9834]

Hola una consulta cuando en mi codigo uso grid-template-rows Grid-gap: no me lo actualiza enla pagina porque peude ser. SAludos

[@ceramoto02]

hola amigo,que editor de tecto utilizas ¿ atom quizas?

[@FalconMasters]

Utilizo Visual Studio Code

[@joseub71]

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?

[@FalconMasters]

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!

[@javiercintron6965]

Saludos Carlos desde Puerto Rico, la CSS Grid funciona para todos los navegadores?

[@YudnerParedes]

Las fr, hacen magia

[@orlandoBcrp]

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.

[@kateluci8]

excelente, me gusto mucho :)

[@melanieekellii]

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.

[@FalconMasters]

Gracias, es curioso creo que mi voz si se parece a la de algunos actores de doblaje :P

[@jhonniercifuentesalzate3456]

compa que tema utilizas en visual estudio

[@FalconMasters]

Ayu Mirage

[@jhonniercifuentesalzate3456]

@@FalconMasters Gracias bro