CSS Grid - 💪 Curso desde cero 💪 Tutorial en Español
Вставка
- Опубліковано 19 чер 2018
- CSS Grid: Layout curso desde cero, tutorial en español, una nueva forma de maquetar tus sitios web responsives, que te asombrará por lo simple y rápido de su utilización en la creación de rejillas.
En este curso introductorio a CSS grid Layout, lograremos aterrizar algunos conceptos claves para que aprendamos a defendernos con estas nuevas propiedades de maquetación con CSS.
Utilizamos la siguiente documentación:
www.w3schools.com/css/css_gri...
developer.mozilla.org/es/docs...
Suscríbete aquí: / bluuweb
Descarga los archivos del curso aquí: goo.gl/4tZAZb
Visita Template Monster aquí: goo.gl/z5h6L2
¿Quiéres apoyar el canal?
Curso de Bootstrap 4 PREMIUM!
Accede con un súper descuento aquí: goo.gl/VQZwKg
Espero contar con tu apoyo, ya que estos canales de ingresos me ayudan a que pueda seguir subiendo contenido a mi canal de UA-cam! GRACIAS!! :)
¿Necesitas crear formularios de contacto con PHP?
Ingresa a mi curso PREMIUM a solo $15 dólares aquí: goo.gl/K2SKWZ
No olvides suscribirte a este hermoso canal y destruirme en los comentarios :)
También puedes seguirme en Facebook: / bluuweb
Finalmente visita mi sitio web: www.bluuweb.cl
Música: www.bensound.com/ --
Mi Setup:
⭐️ Teclado Mecánico: amzn.to/3Ns6fdK
⭐️ Audífonos: amzn.to/3pwrzqt
⭐️ Micrófono: amzn.to/3JH4tV7
⭐️ Monitor: amzn.to/3NTt8Iu
⭐️ Procesador: amzn.to/3raD4EC
⭐️ Tarjeta de Video: amzn.to/437t78b
![Materialize CSS 😃 Material Design Framework [Curso tutorial Español]](http://i.ytimg.com/vi/YJKWkUi2r5g/mqdefault.jpg)
![Materialize CSS 😃 Material Design Framework [Curso tutorial Español]](/img/tr.png)
¿Dudas y preguntas? En Discord todos nos ayudamos 😍: Discord: discord.gg/ZrQAJnD7K8
Los espero. Saludos
Buenas tardes, el enlace de dicord está vencido, no funciona.
Permiso maestro, es que recurro a cada rato a su video.
04:15 Display
05:03 Columnas y Filas
07:03 Separación entre columnas y filas
08:32 Medida fr
12:39 Repeat en las columnas
13:27 Repeat en las filas
14:39 Grid-auto-rows
16:26 Centrado vertical
19:56 Líneas de rejilla
22:01 Pajaros onfire
22:31 Areas y posicionamiento
Gracias, te mereces el cielo :D.
He aprendido más contigo en un momento que con mi profesor en 3 meses bro
Hola Shileno querido! Cerca del minuto 23, venís explicando las "grid-lines" y decís que no sabes por qué del lado derecho e izquiero tenés un 1 y un -1, refiriendote a las columnas. He estado investigando, y eso es por que -1 se refiere al final del conteo de las columnas. Por que las grid-lines para contabilizar las columnas en ciertos casos pueden ser muchisimas y no las vas a estar contando, entonces si querés ir hasta el final solo tenés que poner -1 en la maquetación.
Bienvenidos al curso de Css Grid Layout, prondo más tutoriales :)
hola bro,tengo 3 iconos de red social en una pagina y no puedo hacer q en el hover cada icono tenga un color diferente... supongo q debo ponerle una clase a cada icono,pero luego noc como seguir... desde ya muchas gracias!
Ivan Leiva96 Le pones una clase a los iconos, luego en tu hoja de css escribes la clase más un :hover al final de la misma y ahí entre { } le pones el color que quieras.
Excelente explicación profe, lo felicito por sus videos, se aprecia mucho todo el contenido gratuito.
la mejor explicación de todas, muchas gracias y felicidades !!!
Brutal!! lo que no aprendi en la carre de ing informatica lo estoy aprendiendo aca !!!
Felicitaciones. Un video muy didáctico y muy bien presentado.
Que gran tutorial, mi mas sincera enhorabuena, he entendido prácticamente todo, gracias maestro
Te dejo mi like, como siempre. Gracias por tus vídeos. Aprendí muchísimo con tu curso de Flexbox y también con este.
Impresionante video, el primero que veo bien explicado y sin andarse por las ramas. Rápido (pero comprensible) y al grano. Gracias!
Llevaba ya un tiempo queriendo entender grid pero nunca me ponía con ello, ahora lo entiendo y me parece genial! Habrá que mirar tema de compatibilidad con navegadores. Me parece un concepto muy interesante pero que te hace pensar de un modo distinto a la hora de ponerte a maquetar un website. Muchas gracias Ignacio!!
Este video debería tener muchas más visitas. Todo muy bien explicado sobre esta nueva forma de diseñar páginas web. Excelente video y sigue así (y)
Holaa tenía que comentar vengo viendo tus cursos desde udemy pero lejos de todo lo que he visto se me hizo muy fácil entender mil gracias.
Disfruté mucho aprendiendo con tu video. Me gusta cómo explicás todo despacio y con mucha paz.
Que locura este canal por Dios!! que suerte haberme topado con el... desde ayer estoy on fire con CSS, js, VUE.JS entre otros... La verdad mas claras las explicaciones imposibles. MUCHAS GRACIAS!!
increíble la manera tan simple ye alegre de dejar las cosas tan claras, graciasss
Gracias Maestro... me ayudaste a solventar un problemón que me estaba rompiendo la cabeza... ni con bootstrap podía cuadrar esos elementos. Saludos desde Venezuela!!!
M ha gustado mucho el video, eres sumamente didáctico y estas enfocado en transmitir conocimiento a diferencia de otras personas e instituciones que se dedican a presumir su nivel teórico y adornarse en sus pseudotutoriales, mil gracias por tu valioso esfuerzo, información de alto nivel !!
Muchas gracias, me sirvió un montón este video!
Había tenido una clase en la que dieron este contenido pero yo no había entendido nada. 😅 Pero vos explicaste muy bien, me quedó todo clarito. 🤙
Que monstruo eres, contenido de calidad, muchas gracias.
Excelente video! Es un buen puntapié para iniciarse en el CSS Grid. Saludos desde Argentina :D
Excelente explicación, muchas gracias por su ayuda.😀
Muchas Gracias por la aportación, es un excelente material !
Sos un crack, muy bien explicado.
Excelente tutorial! Gracias por tomarte el tiempo para hacerlo.
Excelente explicación me ayudo mucho a comprender lo basico grid.
Muy bien explicado, gracias!
Excelente video, como siempre.
Si programar fuese medicina aprendería a operar corazones con tus videos.
jajajaja buen comentario! jijijij
A cielo abierto!
muy buen comentario muy creativo literalmente.
Mejor explicado imposible, en el canal de EDteam se explicó este tema, pero está de más decir la cagazón que forma ese sujeto explicando una cuestión tan sencilla. Excelente amigo, sin dudas eres el TOP 1 en cuanto a los que mejores explican tecnologías web. Mis respetos para usted. Te lo dice alguien con experiencia en el mundo de la informática. Sldos
Gracias amigo, tienes una gran facilidad para explicar
Te quiero Chile
Excelente video, muy bien explicado, muy conciso y muy profesionalmente presentado. Felicitaciones.
Recibe un gran abrazo desde Montería-Córdoba en Colombia
Hola que tal, les cuento que tengo una suscripción en Platzi PERO HASTA AHORA NO ENCONTRE NADIE QUE EXPLIQUE MEJOR COMO LO HACEN EN ESTE CANAL.
En tus videos aprendo mucho, en menor tiempo y sin complicaciones. Todo se explica y se entiende excelentemente.
Sigue adelante y muchas gracias por tus videos.
Excelente lo vi de principio a fin muchas gracias
Estaba esperando este tu curso de CSS Grid chilenito. Obrigado por comparti-lo, um grande abraço!!!
Genial jjiji Saludos!
Excelente, muchas gracias
excelente este vídeo. me haz facilitado la vida.
gracias bro por compartir este tipo de conocimientos
Me recontra sirvio. Gracias capo
Muito bom seu vídeo. Parabéns. Sai motivado a utilizar o Grid, que como você demonstrou é muito fácil.
Tu tutorial me ha ayudado bastante
Increíble tus videos! Recién ahora los veo pero tienen muchísimo valor para mi, realmente aprendí muchísimo tanto con el de Flexbox como con este.. En mi humilde e inexperta opinión, siento que es más sencillo desarrollar con GRID, pero quisiera saber como es que se hace un diseño responsive a partir de grid.
Respecto a tu canal quiero comentar que a la hora de enseñar no solo es importante brindar contenido de calidad, si no tambíén la forma en la cual uno se expresa y de todos los videos que vi e incluso de canales conocidos, en este canal me he sentido muy cómodo y en ningún momento se me dio por sacar el video.
Te felicito y ojalá subas algún proyecto desarrollando una web con grid!
Saludos!
Una actualización! Al tipear "grid-gap", y otras que tambien comienzan con grid, VSC me muestra la propiedad tachada y con un mensaje que dice que ya es obsoleta y debería evitar usarla. Que ha sido reemplazada por la propiedad "gap", entonces ahora es "row-gap" y despu´s "column-gap" . A tener en cuenta los que estamos siguiendo el tutorial.
¡Chocolate por la noticia! 👏
Gracias por la información, amigo!
y esto por que no tiene más likes? está increíble
Muchas gracias! ♥
muy bueno,gracias
Muchas gracias
muy bien explicado
Que buen video wachito
Saludos y gracias por tu comentario :)
muy bueno, gracias genio
muy buenos tutoriales, vengo de udemy
Excelente tutorial
Me tocó parar el video cuando escuché que literalmente me iba a explotar el cerebro. Me gusta mi cerebro y no quiero que literalmente explote
Literalmente no sabe como usar la palabra "literalmente" 😂
aslkdj jfa baaaf grid gap
cerebro.exe has stopped working.
restarting...
A mi literalmente se me explobro el cereto.
Yo quiero que explote en sentido figurado, configurado
que gran persona sos, podeis hacer uno usando grid para el esquema general y flex para los contenidos de cada cajita o div? seria estupendo. Gracias en vdd
Muchas gracias :)
excelente tutorial...!!!
Excelente curso, excelente explicación, excelente maestro. Muchas gracias por tu gran dedicación y esfuerzo. Un abrazo
Gracias
Perfect my friend !
Gracias! :) Saludos!
Primero que todo, felicitarte por la cantidad y la calidad de videos que tienes en tu canal SHILENO, me los estoy devorando a todos, y gracias a tus tutoriales ya me salió mi primer trabajo, una simple página estática para la casa de videojuegos de un amigo. Segundo: Cómo es el tema con las publicidades que salen mientras veo los videos? Debo dejarlos hasta el final? Y asi te beneficiamos? Pues me gustaría hacerlo ya que tú haces demasiado por nosotros. Si no es mucho pedir, me gustaría apuntar tu email o algún medio de contacto para platicar. Saludos desde Argentina Capo!
Hola que tal
Si flexbox era bueno, css grid layout es genial!!! lo digo por lo poco que ya he visto. Saludos
Si se pueden hacer cosas geniales :)
Hola me sorprendio este video, quede con dos dudas, esto viene integrado con css3 porque vi que no llamaste ninguna librerìa y podria trabajarlo de la mano con bootstrap reemplazando los grid que vienen con bootstrap? Saludos.
buen tutorial, muchas gracias, en lo personal me aferro a flexbox por ahora, porque grid no es soportado por todos los navegadores, solo falta que sea soportado por opera mini, solo es el 2.65%, pero creo que es mucho y sobre todo tratandose de dispositivos mobiles, solo falta eso.... www.caniuse.com/#feat=css-grid
Que plugin utilizas para inspeccionar los elementos
una pregunta, no empece a ver los videos, pero estuve leyendo unos pdfs con css grid. entonces flexbox no se usa? porque por lo que veo es mejor css grid, o para que cuestiones se usa flexbox? pregunto desde la ignorancia
Buen trabajo! Ahora, cómo se haría para que se adapten la cantidad de columnas según dispositivo, como lo hace Bootstrap
con @media queries.
a alguien le paso que directamente en .container no le salga la opcion grid-template-columns? no me sale, no los puedo alinear
Pregunta de principiante.¿Es posible colocar varios input/select/etc., dentro de una celda (de la grilla) ? Porque he colocado todos estos elementos de a uno por separado, y me parece poco práctico.Hice un grid de 4 columnas y 8 filas, voy dejando algunas celdas vacias ( ) y coloco el input/boton en la que corresponde, por eso la pregunta. Gracias.
Buen vídeo, como configuraste el Live Server para que por defecto corriera sobre Firefox Developer (Me gustaría saber como cambiar esa opción sin la necesidad de cambiar el navegador por defecto del sistema operativo)
copia y pega el enlace y listo, saludos
Puedo crear varios container? o sería una mala práctica/
puedo poner grids dentro de grids
Buen video!, lo guay es que ya lo soportan todos los navegadores , o casi :) caniuse.com/#search=grid
Css grid o bootstrap ? Desde tu opinion, Cual usar?
ya que no te respondieron es mejor quedarse con FlexBox de Bootstrap segun mi experiencia.
Excelente Video. Ahora, una pregunta: Qué recomiendas más, FlexBox o Css Grid?
Saludos, me hice la misma pregunta, y la respuesta es que se complementan, la idea es trabajarlos juntos.
Se sugiere Flexbox para componentes y CSS Grid Layout para estructura, Flexbox para layouts sencillos y Grid para Layouts Complejos.
Una explicación que considero bastente buena en: platzi.com/blog/flexbox-vs-css-grid-cual-es-la-diferencia/
@@FcoJavierNW Muchas gracias por la respuesta. Lo tomaré en cuenta y bueno a seguir aprendiendo sobre el tema. Saludos.
Como cargo Firefox Developer en Visual Studio Code?
Estimado una consulta , para poder desarrollar aplicaciones web que recomendarías? Yo partí con PHP que seguiría según tu opinión? Saludos
aprende html css sass javascript
Gracias por ayudar :)
Se que la pregunta no va dirigida a mi... pero no puedo evitar dar mi muy particular opinion:
Si bien hay varios lenguajes que puedes usar, PHP es el más común, del que vas a encontrar mas documentación, librerías de plugins (por ejemplo Mibew para instalar un chat en tu sitio web), y encontrar buenas herramientas para la gestión de las bases de datos. En algunas universidades de latinoamérica, que gozan del "apoyo" de Microsoft, recomiendan el uso de ASP, académicamente hablando puede recomendarse, pero dichos académicos imparten la materia pero no generan sitios web, hay un "pequeño detalle" que se debe considerar: CONTRATAR UN SERVIDOR QUE OPERE CON ASP ES MUCHO MÁS COSTOSO!!!
Gracias por compartir tus conocimientos eres un crack, pero tengo una pregunta flebox remplazo a float entonces grid podrá quitarle cancha a flebox o ambas serán de mucha utilidad es q ando estudiando flebox
Yo creo que no ha reemplazado nada... solo es una nueva forma de maquetar y de hacer las cosas más simples (y maquetaciones que no podías hacer con flexbox) pero si mezclas dos dos no hay problema :)
Al contrario amigo! Ambas se complementan a la perfección! Uno sirve para LAYOUT y el otro para COMPONENTES!
Eres de Chile?
Cómo veo el diseño en Mozilla developer no aparece de primeras?
Saludos
si lo tienes en ingles debe aparecer como layout
Esto es responsive?
que dicen? :D
1. Grid
2. Flexbox
Cuál es mejor?
Flexbox :P
Hola, los dos pueden trabajar juntos, depende de lo que necesites hacer, no tengas miedo de mezclarlos!
Grid salio despues de flexbox... osea es un poco mejor
Para cosas complejas grid, para simples columnas como el 90& de los casos flexbox de bootstrap basta.
... eh? y eso como se entiende?????: "al trabajar HORIZONTALMENTE vamos a trabajar con COLUMNAS????y al trabajar VERTICALMENTE vamos a trabajar con c/u de las filas?????" ich glaub' ich spinne (=creo que estoy loco)
fácil supongamos que esta es una linea horizontal --------- y si la partimos horizontalmente en tres --- --- --- obtenemos 3 columnas, así de simple, y si la linea fuese vertical y la partimos verticalmente en 3 pedazos obtendríamos 3 filas, la confusión viene de que antes ordenábamos cajas que contenían cajas y ahora cortamos/dividimos una gran caja que contendrá cajas.
no te entiendo nada
Video no apto para que los que solo usan boostrap XD
Bootstrap con flexbox basta, Grid para algo muy especifico. Quizas como un juego de ajedrez.
Grid llega tarde creo. Los desarrolladores maquetamos la informacion e imagenes, no cuadriculamos la info par algo complejo y Bootstrap ya dejo una idea como como hacerlo asi que Grid llega tarde pero puede servir para algo concreto.