Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

驴De d贸nde venimos y en d贸nde estamos?

2

驴C贸mo fue pensado CSS cuando se cre贸?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

驴C贸mo se lleg贸 al concepto de CSS Grid?

5

驴CSS Grid es una idea nueva? La evoluci贸n de la especificaci贸n

6

驴Qu茅 significa Grid para CSS?

Control de alineamiento

7

T茅cnicas de alineamiento antes de CSS Grid: margin y line-height

8

T茅cnicas de alineamiento antes de CSS Grid: table-cell y positions

9

T茅cnicas de alineamiento antes de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades f铆sicas y l贸gicas en CSS + Quiz

12

T茅cnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Qu铆z

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

隆Iniciemos nuestro proyecto! Fase de creatividad e identificaci贸n de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: 驴display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generaci贸n autom谩tica de tracks + Qu铆z

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

隆Manos al c贸digo! Fase de construcci贸n de la grid principal de nuestro proyecto

23

Ubicaci贸n + Reto

24

Alineamiento en los elementos hijos + Quiz

25

隆Manos al c贸digo! Fase de ubicaci贸n y alineamiento

26

Continuando con la fase de ubicaci贸n y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

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

Responsive y CSS Grid

27/28
Recursos

Aportes 53

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

<h4>Ideas/conceptos claves</h4>

Las media queries (en espa帽ol 鈥渃onsultas 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).

<h4>Apuntes</h4>
  • 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/

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
馃槮

Excelente curso le pusieron mucho empe帽o. Con esto ya me puedo defender con grid layout. De los mejores cursos que he visto de platzi

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铆

Mi proyecto 馃殌:

este es mi proyecto!

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 馃槑

Otra forma de elegir los break points, es ver hasta donde tu pagina se ve 鈥渂ien鈥, 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 鈥渁rtistica鈥 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 鈥渕i 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

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