Curso de CSS GRID: 1.- Primeros pasos y Creando Nuestra Primera Grid
Вставка
- Опубліковано 19 вер 2024
- En este primer capitulo vamos a dar nuestros primeros pasos y crearemos una grid desde cero con este nuevo sistema.
🚀 Blog de diseño web:
www.falconmaste...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
📄 Código HTML del video: github.com/fal...
📄 Código CSS del video: github.com/fal...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters - Наука та технологія
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
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 !!
Es el mejor video que he visto sobre CSS grid. Un like no es suficiente para todo lo que quiero agradecerte.
Está loco! explicas demasiado bien, se nota que realmente disfrutas lo que haces! seguí así :)
De acuerdo contigo 👍👍👍
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!
¡Lo que luchaba uno antes con floats, diseño líquido, frameworks, etc! ¡Qué gran video!
Explica muy bien, se entiende mucho mas rápido la forma de exponer el tema. Realmente 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
OFF tu contenido es sumamente genial, explica super bien hasta la mas mínima cosa,.
Ya esperando el 2do... Gracias por transmitir lo que sabes.
Mañana subiré otros 2.
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.
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..
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
Sin duda el mejor profesor del que he aprendido algo
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.
Ayer me puse a investigar sobre las grid, y justo hoy sacas este curso. ¡Muchas Gracias!
Gracias por enseñarnos Carlos Arturo
ya he visto varios tutoriales tuyos, explicas demasiado bien y despejaste muchas dudas que tenía. Gracias de antemano me has ayudado mucho.
2021 y me salvaste la vida, te amo ❤.
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!
Muy bueno el css grid, pendientes de ver!! like!
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.
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.
Genial , me encanto, una joya este video.
COMO TODO TUS VIDEO GENIAL..!!!
FANTASTICO!
Excelente video. Muchas gracias
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!
Gracias, no conocía el display:grid, sigo con el próximo!
muy recomendable tu canal falconcito! :)
Bien eh👏👏👏. Saludos!
muchas gracias. Ahora sí a continuar con tu cruso de desarrollo web. Muchisimas gracias
gracias hermano, buen trabajo
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.
Ya me enamoré de GRID
Como siempre activado en tus videos falcon. Saludos!!!
Genial muchas gracias
Excelente. Recomendable como siempre. Gracias.
Fantastico!
que genialidad, en 4 propiedades te ahorra tanto trabajo
MUCHAS GRACIAS por tus cursos, son excelentes y explicas muy bien... sigue adelante
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
eres un buen profesor gracias, explica muy bien
WoW!! una pasada... deja termino la practica de Diseñando mi portafolio y hago este cursazo :D
Genial! :D
Excelente amigo y 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.
Muchas gracias!
Excelente explicación, eres todo un crack
Excelente, Gracias nuevamente por compartir tus conocimientos
excelente demostracion... empiezo pa aclarar dudas q dejaron el menu avanzado tipo amazon.
16:09 minuto en el que me enamore de grid ♥
gracias carlos me ayudaste bastante con todo tus cursos
Muy buen video, estoy siguiendo este curso, me gusta. Saludos! !
Genial Carlos, buen material, espero los demas con ancias, muchas gracias.
Q buen curso muchas gracias
Me encanto, yo me enamore del grid y del maestro
Muy buen tutorial muchas gracias!! Excelente maestro!
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!
sos un genio explicando!!!
Muy bien explicado, muchas gracias!!!!
Loco, te admiro; explicas bien!!!!
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
Gran video
Gracias
Que genial gracias por enseñarnos
Gracias hermano bien explicado
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!
excelente, 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
Ótima vídeo aula ✌.
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)
Muchas Gracias
Las fr, hacen magia
muy interesante
excelente, me gusto mucho :)
el color del minuto 5:39 para que lo copien : #2f89fc.
El curso está buenísimo pero tengo una pregunta, como se llama el tema de VS que usas?
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, 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.
mucho mejor que usar flex floats y porcentajes
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.
Hola, gracias por tus videos, sigo todos los pasos y no logro que me tome las propiedades del grid. que podre estar haciendo mal?
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
Buen vídeo bro, realmente estaba confundido.
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?
ponte la extencion de live server i activa el autoguardado
Los veo en la tele y le doy like por el móvil 😅
Entiendoooo
Como aclaración, esa función que hace que aparezcan las lineas punteadas no aparece en Chrome, solo en firefox. Buen vídeo.
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.
Hola buenas tardes una pregunta,grid vendria a hacer una alternativa a flexbox?
alla vamos x2!
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 !!!
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/
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.
Esto es mejor que usar Bootstrap? O es sólo una forma diferente y ya?