😈Maquetado con GRID explicado como nunca antes!
Вставка
- Опубліковано 28 сер 2023
- Código fuente: github.com/Franklin369/grid-m...
Todos mis cursos de udemy con descuento: codigo369.com/
Grupo telegram para programadores de JavaScript, html, css, React: t.me/htmlycss369
Pagina para crear las miniaturas: shots.so/
#html #responsive #css #javascript - Розваги
Gracias por el excelente contenido que nos brindas , para seguir aprendiendo.
me ha encantado, te aclara bastante y te proyectas a realizar disenos responsivos mucho más facil.
Si tuviera plata, me uniria al canal pero por el momento me suscribo, explicas muy bien bro
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.😅
Excelente aportación para ir actualizandose como ingenieros tecnologicos.
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.
bro todo claro y conciso, genial aporte, te recomiendo y me suscribo!
Excelente !! muchas gracias
que genial por fin encuentro algo que me sirve y entiendo
muy buen vídeo, sigue así
Muchas gracias me sirvió bastante
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!
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
eres un crack!!!! Gracias
Muy bueno !!
Gracias opor la explicacion me ayudo bastante
Genial!!
Gracias sensei
buenísimo el video 7w7
¡ F A N T A S T I C O!
Gracias por el video,un día podrías hacer un video con tus extensiones.
¡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?
Wow!!🤯
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
hola amigo, no seria mejor usar la etiqueta main en vez de article?
Metodología Mobile First
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?
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
El identado me confundió jsjsjs