Les dejo esta web para saber su medida de pantalla y las mas utilizadas, asi podemos nosotros ver cuales son las que nos conviene para crear los breakpoints
MyDevice.io
, minmax() y fit-content()
Propiedades y valores para los elementos hijos
¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
Ubicación + Reto
Alineamiento en los elementos hijos + Quiz
¡Manos al código! Fase de ubicación y alineamiento
Continuando con la fase de ubicación y alineamiento
Lo que podemos lograr adicionalmente con CSS Grid
Responsive y CSS Grid
Continúa con el Curso de Diseño Web con CSS Grid y Flexbox
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 43
Preguntas 2
Les dejo esta web para saber su medida de pantalla y las mas utilizadas, asi podemos nosotros ver cuales son las que nos conviene para crear los breakpoints
MyDevice.io
 son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).
<h4>Apuntes</h4>Nice
Muchas dispositivas y poco código
Me quede con las ganas de que se explique en código, con un ejemplo más claro
😦
No supe como subir un gif en los comentarios, pero les dejo un link en el que pueden verlo, le puse un breackpoint al proyecto para que no e viera tan distorsionado 😃
https://imgur.com/dWzATb4
Les recomiendo esta herramienta https://blisk.io/ este es un navegador para desarrolladores web y te permite seleccionar los diferentes modelos de teléfonos, tablet, laptop y pc e ir mirando en tiempo real lo que va sucediendo en cada una de las versiones 👩🏻💻
Para poner en práctica algunos conceptos aprendidos en este curso, decidí hacer la siguiente práctica:
https://jorgemacper.github.io/layoutgridfrontend/practica/index.html
No conocía nada de grid y ahora le veo un gran potencial
Así quedo mi proyecto:
Dos recomendaciones:
Un excelente curso, lo disfrute de principio a fin, hay que resaltar muchos puntos pero uno que no hay que dejar pasar es el de la documentación, gracias por crear estos cursos.
Hola buenas, solo para mencionarle a los futuros estudiantes del curso. Denle una leída a la documentación que dejo la maestra en github, pues algunas preguntas salen de ahí
Asi me quedo mi página:
** Desktop **
** Mobile **
no creo que este bien decir diseño responsivo, suena como raro jajajaa, prefiero decir desiño responsive
Comparto mi proyecto
Este es mi proyecto con responsive y todo…
https://brandon328.github.io/BaG/
Con la función de auto-fit() ADAPTA las columnas DISPONIBLES ACTUALMENTE en el espacio expandiéndolas para que ocupen cualquier espacio disponible. El navegador hace eso después de LLENAR ese espacio adicional con columnas adicionales (como con el autocompletar) y luego colapsar las vacías.
Con la función de auto-fill() LLENA la fila con tantas columnas como pueda caber. Por lo tanto, crea columnas implícitas cada vez que cabe una nueva columna, porque está tratando de LLENAR la fila con tantas columnas como sea posible. Las columnas recién agregadas pueden estar vacías, pero seguirán ocupando un espacio designado en la fila.
ya lo pase, pero me vine por el ultimo a ver que se dice 😎
El reto dice 😂😂😂
Hay mucho material para practicar, con todos los conceptos que vimos será realmente más sencillo seguir videos así, retos y comenzar a aplicar todo.
https://www.youtube.com/watch?v=QBOUSrMqlSQ
No entiendo las quejas, el curso te da todo lo necesario y no es simplemente hacer código y copiar…
A final de cuentas creo que dependeria del estilo de la pagina web ver si se crea todo con grid o se lo va haciendo por secciones ya que si la pagina es mas “artistica” es decir que tenga una linea por un lado un recuadro por otro, una imagen no necesariamente centrada, contenedores sobrepuestos es bastante util colocarle una grilla completa a toda la pagina, mientras que si la pagina maneja cierta estructura se deberia irla realizando por secciones (header, body, footer, etc) y dentro de estas secciones manejarse de acuerdo a las necesidades
Buen curso. Su proposito de enseñár los conceptos los cumple.
Cabe mencionar que en tamaños de texto es recomendable usar medidas em o rem para responsive
Como practica final, elegí analizar según lo visto en clases la grid de la pagina de “mi crédito” de liverpool.
En cuestión de ubicar los elementos, me quedo muy claro la forma de hacerlo, en realidad de eso se trató esta practica.
Posteriormente veré lo de agregar textos, links y todo el contenido para simular ser la página real.
Este es Mi proyecto
MOVIL
DESKTOP
CODIGO:
@media screen and (max-width: 427px) {
.container {
min-width: 320px;
}
.item-1 {
grid-column: 2 / 9;
grid-row: 10 / 11;
}
.item-2 {
grid-column: 2 / 4;
grid-row: 9 / 11;
}
.item-3 {
grid-column: 1 / 6;
grid-row: 6 / 8;
}
.item-4 {
grid-column: 4 / 7;
grid-row: 5 / 7;
}
.item-5 {
grid-column: 3 / 9;
grid-row: 4 / 8;
}
.item-6 {
grid-column: 4 / 10;
grid-row: 8 / 9;
}
.item-7 {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.item-8 {
grid-column: 3 / 7;
grid-row: 3 / 4;
writing-mode: horizontal-tb;
transform: rotate(360deg);
}
}
m
No se como pasar la imagen de pantalla de mi computador y subirlo a aquí?
Thanks. 💚
recuerden utilizar las DevTools si estan en chrome pueden ajustar el tamaño de la pantalla, para probar diferentes tamaños de pantallas le dan click en el icono del telefono arriba a la derecha y con la barra de que sale en la parte superior van cambiando los tamaños dependiendo del dispositivo que escojan
Para abrir las DevTools es con F12
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.