Mi amigo, me estas mostrando el cielo 🎉 soy completamente nuevo en programación y era muy abstracto para mi el proceso de maquetacion, te han ganado un muy buen like y mi sincera suscripción, sigue así muchas gracias.
Muy bueno!! En lo personal creo que es lo mas complicado a la hora de aprender css pero luego que lo dominas todo se vuelve mas facil, me guardo el video para tenerlo como guia a la hora de hacer nuevos projectos. ya que yo al hacer hacer grid y flex lo hacia a la vieja escuela.😅
En este video se explica detalladamente cómo maquetar con Grid en CSS para lograr la distribución deseada en una página web, mostrando ejemplos para dispositivos móviles, tablets y desktop. Se destaca la importancia de combinar Grid con Flex para lograr un diseño gráfico efectivo y fluido en cada bloque del maquetado. Momentos clave: 00:00 Maquetado con CSS Grid y Flex -CCS Grid permite distribución y maquetado deseado. -Flex y Grid son complementarios, no enemigos. -Inicia maquetado con dispositivos móviles y estilos básicos. 02:32 Creación de un grid container con áreas definidas -Se definen las áreas internas del grid container -Uso de grid template para organizar las áreas 05:07 Organización de diseño responsive para dispositivos móviles y tablets -Definición de estructura para dispositivos móviles -Creación de breakpoints para tablets 07:39 Distribución de diseño responsivo para diferentes dispositivos -Definición de la distribución para tablet -Definición de la distribución para desktop 10:14 Maquetado con Grid y Flex para diferentes dispositivos -Distribución de columnas y filas para modo desktop -Definición de distribución para Tablet y Mobile Generado por sider.ai
Yo lo que hago, es hacer un snippet, y dejar coloreado en cada una de las partes. Header, nav, sidebar, footer, etc. Para que sea más fácil construir a nivel de front-end.
¡Me has abierto los ojos! ¡Gracias! Me ha gustado mucho lo de maquetar con grid y contenido con flex. ¿Se puede hacer un menú sin listas, sólo con div y flexbox?
El video es excelente, mas claro no puede ser y lo entendí de una verz por todas!! pregunta: ¿como se llama la extension de VS que ele pone una linea amarilla que une las llaves de apertura y cierre al codigo en CSS? minuto 1:51 ¡gracias!
Buenas! Quería saber porqué al añadir contenido dentro de los grid(ya sean o imágenes dentro de ellos) deja de ser responsivo y todo el contenido se sobrepone. ¿Cómo podría organizar el contenido dentro de la estructura grid, añadiendo imágenes en el aside, otra en el main junto con texto etc? Gracias de antemano, y ojala puedas responderme pronto. Un saludo
si vas a poner a una imagen segun el tamaño de columna o fila, deberias crear un contenedor que tenga a la imagen, es decir al contenedor, darle un width 100% y solo va a ocupar todo el ancho de la columna o la fila, y por lo que la imagen si le pones 100% dentro de ese contenedor que la contiene, se vera a ese tamaño del contenedor. no se si me explico. si vas a agregar tres imagenes por ejemplo, puedes usar un div para las tres y usar un flex y configurarlo a tu antojo
Muy buen video amigo, solo me quedo una duda... Por que en la maquetacion para tablet pones dos filas de "header navbar" 50px??? No es igual a poner una sola fila con "header navbar" 100px??? Es solo una duda, gracias por el video!!!
Gracias por el excelente contenido que nos brindas , para seguir aprendiendo.
Más fácil imposible gran trabajo y didáctico
Parce explicas de una manera tan agradable y comprensiva, aplicaré todo lo de tu video Mil GRACIAS! ❤
Mi amigo, me estas mostrando el cielo 🎉 soy completamente nuevo en programación y era muy abstracto para mi el proceso de maquetacion, te han ganado un muy buen like y mi sincera suscripción, sigue así muchas gracias.
me ha encantado, te aclara bastante y te proyectas a realizar disenos responsivos mucho más facil.
muchas gracias, se me hacia un poco tedioso el maquetado, pero con este video se vuelve muy muy sencillo.
Uno de los mejores videos que he visto sobre maquetado. Muchas gracias.
que grande mi bro tenia varias dudas pero desconocia esa forma de escribir css
Muy bueno!! En lo personal creo que es lo mas complicado a la hora de aprender css pero luego que lo dominas todo se vuelve mas facil, me guardo el video para tenerlo como guia a la hora de hacer nuevos projectos. ya que yo al hacer hacer grid y flex lo hacia a la vieja escuela.😅
Si tuviera plata, me uniria al canal pero por el momento me suscribo, explicas muy bien bro
Efectivamente como lo dice el titulo... "Explicado como nunca antes". Gracias...!!!
Excelente aportación para ir actualizandose como ingenieros tecnologicos.
En este video se explica detalladamente cómo maquetar con Grid en CSS para lograr la distribución deseada en una página web, mostrando ejemplos para dispositivos móviles, tablets y desktop. Se destaca la importancia de combinar Grid con Flex para lograr un diseño gráfico efectivo y fluido en cada bloque del maquetado.
Momentos clave:
00:00 Maquetado con CSS Grid y Flex
-CCS Grid permite distribución y maquetado deseado.
-Flex y Grid son complementarios, no enemigos.
-Inicia maquetado con dispositivos móviles y estilos básicos.
02:32 Creación de un grid container con áreas definidas
-Se definen las áreas internas del grid container
-Uso de grid template para organizar las áreas
05:07 Organización de diseño responsive para dispositivos móviles y tablets
-Definición de estructura para dispositivos móviles
-Creación de breakpoints para tablets
07:39 Distribución de diseño responsivo para diferentes dispositivos
-Definición de la distribución para tablet
-Definición de la distribución para desktop
10:14 Maquetado con Grid y Flex para diferentes dispositivos
-Distribución de columnas y filas para modo desktop
-Definición de distribución para Tablet y Mobile
Generado por sider.ai
bro todo claro y conciso, genial aporte, te recomiendo y me suscribo!
Muchas gracias por tan buena explicacion, felicitaciones.
que genial por fin encuentro algo que me sirve y entiendo
Gracias opor la explicacion me ayudo bastante
Excelente !! muchas gracias
muy buen vídeo, sigue así
Muchas gracias me sirvió bastante
Yo lo que hago, es hacer un snippet, y dejar coloreado en cada una de las partes. Header, nav, sidebar, footer, etc.
Para que sea más fácil construir a nivel de front-end.
eres un crack!!!! Gracias
Gracias por el video,un día podrías hacer un video con tus extensiones.
buenísimo el video 7w7
¡Me has abierto los ojos! ¡Gracias! Me ha gustado mucho lo de maquetar con grid y contenido con flex. ¿Se puede hacer un menú sin listas, sólo con div y flexbox?
El video es excelente, mas claro no puede ser y lo entendí de una verz por todas!! pregunta: ¿como se llama la extension de VS que ele pone una linea amarilla que une las llaves de apertura y cierre al codigo en CSS? minuto 1:51 ¡gracias!
Muy bueno !!
Genial!!
Gracias sensei
Wow!!🤯
Buenas! Quería saber porqué al añadir contenido dentro de los grid(ya sean o imágenes dentro de ellos) deja de ser responsivo y todo el contenido se sobrepone. ¿Cómo podría organizar el contenido dentro de la estructura grid, añadiendo imágenes en el aside, otra en el main junto con texto etc?
Gracias de antemano, y ojala puedas responderme pronto. Un saludo
si vas a poner a una imagen segun el tamaño de columna o fila, deberias crear un contenedor que tenga a la imagen, es decir al contenedor, darle un width 100% y solo va a ocupar todo el ancho de la columna o la fila, y por lo que la imagen si le pones 100% dentro de ese contenedor que la contiene, se vera a ese tamaño del contenedor. no se si me explico. si vas a agregar tres imagenes por ejemplo, puedes usar un div para las tres y usar un flex y configurarlo a tu antojo
Hola amigo una pregunta a la hora de definir los nombres es necesario que sean solo esos ? o puedo darles el nombre de la clase que tengo de cada div?
Muy buen video amigo, solo me quedo una duda... Por que en la maquetacion para tablet pones dos filas de "header navbar" 50px??? No es igual a poner una sola fila con "header navbar" 100px??? Es solo una duda, gracias por el video!!!
super
Metodología Mobile First
Me sentí que me daba la clase porque se tenía que ir.
hola amigo, no seria mejor usar la etiqueta main en vez de article?
Si
Me sale un error en @media (min-width:768) me suelta un error q dice se esperaba y no sé cómo solucionar
Y si tengo 3 bloques del mismo ancho y altura como hago eso
El identado me confundió jsjsjs
Yo lo estaba haciendo todo al revés jejejeejej (soy novato😢)
¡ F A N T A S T I C O!