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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 53
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>Les dejo una extensión de chrome que está increíble para hacer responsive, da la vista de la web que estamos trabajando desde varios tamaños de dispositivos. Y es compatible con Live Server de VSCode.
CHrome: https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=es
Firefox: https://addons.mozilla.org/es/firefox/addon/multi-responsive-viewer/
Muchas dispositivas y poco código
Nice
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.
Me quede con las ganas de que se explique en código, con un ejemplo más claro
😦
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 👩🏻💻
Así quedo mi proyecto:
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
Asi me quedo mi página:
** Desktop **
** Mobile **
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
Comparto mi proyecto
Mi web responsive
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…
Dos recomendaciones:
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í
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);
}
}
Buen curso. Su proposito de enseñár los conceptos los cumple.
no creo que este bien decir diseño responsivo, suena como raro jajajaa, prefiero decir desiño responsive
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 😎
Recomendación:
Otra forma de elegir los break points, es ver hasta donde tu pagina se ve “bien”, claramente empezar desde celular (mobile first) e ir agrandando el tamaño de la pantalla para var el punto en el que deja de verse bien tu pagina o esa se rompa y tomar ese punto como un break point, es algo que se utiliza mucho actualmente
Quizás no sea la mejor forma. pero realizando una pequeña búsqueda y recordando los temas visto en el curso nombrado. realice los siguientes @medias
@media (max-width: 810px){
.container{
height: 810px;
grid-template: repeat(10, 80px) / repeat(10, 80px);
}
.item-7,.item-8{
font-size: calc(75%);
}
}
@media (max-width: 710px){
.container{
height: 710px;
grid-template: repeat(10, 70px) / repeat(10, 70px);
}
.item-7,.item-8{
font-size: calc(75%);
}
}
@media (max-width: 610px){
.container{
height: 610px;
grid-template: repeat(10, 60px) / repeat(10, 60px);
}
.item-7,.item-8{
font-size: calc(75%);
}
}
@media (max-width: 510px) {
.container{
height: 510px;
grid-template: repeat(10, 50px) / repeat(10, 50px);
}
.item-7,.item-8{
font-size: calc(75%);
}
}
El reto dice 😂😂😂
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
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
m
Hola compañeros. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test
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?
o inicia sesión.