Responsive y CSS Grid

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
![](

![](

No se si es solo en mi caso pero me parece que el curso dejo mucho que desear, o esta mal nombrado, deberia llamarse Fundamentos de CSS Grid, también debido a que el proyecto fue muy flojo
Necesitamos otro curso en el que se programe de inicio a fin una pagina web interesante con CSS Grid para que podamos aprender en la practica las distintas herramientas y no solo un numero infinito de slides

Saludos, les comparto mi versión del proyecto. Ya incluye diseño responsivo.
Link

Me quede con ganas de que Teff en este punto explique, al menos tener su diseño con dos medidas para mostrar algo práctica, ahora no se como encarar mi proyecto, no se si con los clasicos mediaqueries o hay algo nuevo con css grid para el respnsive.
En este video hubiese preferido algo así.

Mi proyecto es:

Me gustaria poder al menos armar uno abajo del otro en columnas de ancho completo, para por lo menos no se pierda nada. Pero saber como es viable hacer eso.

Para no estar cambiando el font size dependiendo el dispositivo, puede agregar este codigo, la fuente por defecto es 1rem = 16px , al aplicar el codigo re-define la fuente a 1rem = 10px como default, entonces ahora pueden usar matematica basica, necesitas 12px? entonces 1.2rem, necesitas 20px? entonces 2rem , etc, y como usa el root como inicio, se adapta al root del dispositivo en uso.

Les hace la vida mas facil

html {
  font-size: 62.5%;
}
	

Yo quiero dejar mi muestra de lo que hice utilizando Css grid

Espero les agrade

Hola, comparto mi versión del proyecto.

Y asi quedo
Talvez no quedo 100% Exacto pero me encanto como quedo

📲 Responsive y CSS Grid

Las media queries (en español “consultas de medios”) 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).

• Existe una gran variedad de dispositivos con diferentes tamaños de pantalla
• Debemos establecer los puntos de inicio y final
  • Establecer el público, para determinar estos valores
• Es crucial tener un rango de pixeles para trabajar (min: 360px - max: 414px)
• Para aplicar los diseños usaremos la media queries
• Para usar CSS Grid con reglas responsive es recomendable usar
  • Auto fill ⇒ Llena el contenido con todo el contenido posible
  • Auto fit ⇒ Encaja las columnas disponibles en un espacio disponible

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/

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
😦

• Publiqué mi proyecto con GitHub Pages: https://patugarte.github.io/cinnema-magazine
• Dejo enlace al repositorio por si les interesa mirar el código.
  Preview:
  
  

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.

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 👩🏻‍💻

Asi me quedo mi página:
** Desktop **

** Mobile **

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

este es mi proyecto!

Mi web responsive

Comparto mi proyecto

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

Mi proyecto 🚀:

• Demo
• Repo

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:

• https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb
• En lo personal prefiero poner aparte (otro archivo), para que, no se sature mi “CSS”, principal. <link rel=“stylesheet” href=“ejemplo.css” media=“screen and (min-width: 768px)”>

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í

Desktop

Mobile

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 😎

Comparto mi Proyecto ⭐

• Inspiración
  

  

• Resultado Final
  

  

• Enlace al código en Github Aquí

• Enlace a la DEMO Aquí

Así quedó el mío, solo cambie colores, me hace falta hacer un curso de diseño :c

MOVIL

DESKTOP

Recomendación:

https://www.responsively.com/

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.

1. Análisis de grid principal.

1. Definir el contenedor

1. Generar el grid del contenedor y empezar a ubicar los elementos. Se me hizo mas fácil colocar los elementos con la propiedad grid-area.

1. Resultado, use la herramienta del inspector de elementos para visualizar la grid creada y poder asignar las áreas de manera mas rápida.

Este es Mi proyecto

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