Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes:$349
$259
Currency
Antes:$349
Ahorras:$90
COMIENZA AHORA
75

Crea un comic responsive con CSS Grid

6815Puntos

hace un mes

Curso de CSS Grid Layout
Curso de CSS Grid Layout

Curso de CSS Grid Layout

Aprende CSS Grid Layout para maquetar sitios web complejos sin complicaciones. Analiza tus diseños, divide tu aplicación en cuadrículas y conviértelas en estilos CSS. Integra CSS Grid con Flexbox y el modelo de caja para alinear tus elementos exactamente donde deben estar. Descifra todos los misterios de CSS Grid Layout para convertirte en frontend developer profesional con tu profesora Estefany Aguilar.

¡Te doy la bienvenida a un nuevo reto de CSS! Esta vez vamos a hacer un cómic responsive usando CSS Grid.

Mafalda

Compártenos el resultado final en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS. 😉

Antes de empezar, te recomiendo tomar los siguientes cursos en Platzi:

Paso 0: planeación

  1. Diseña el esqueleto de tu cómic en los diferentes dispositivos
  2. Identifica las filas y columnas creando líneas imaginarias
  3. Crea las filas y columnas del contenedor para los diferentes dispositivos
  4. Ubica cada elemento en la cuadrícula dependiendo del dispositivo
  5. Embellece tu cómic
  6. ¡Compártenos tu resultado en los comentarios!

Recomendación: evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento (sin afán, tómate tu tiempo). Sólo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

Paso 1: Diseña el esqueleto de tu comic en los diferentes dispositivos

Una de las mejores cosas que podemos hacer para que nuestras páginas web en general se vean muy bien es diseñarlas para los diferentes dispositivos. Es decir, que si nuestros usuarios entran desde su compu, su tablet o su celular, puedan tener una muy buena experiencia en nuestro sitio. A esto se le conoce como responsive design.

Para empezar a diseñar nuestro cómic (o cualquier página web) debemos definir en qué dispositivos queremos que se vea bien. Con base en eso poemos definir los puntos de interrupción o breakpoints para adaptar nuestro diseño.

Hay diversas formas para definir los puntos de interrupción o breakpoints. Una de las formas que más me gusta, es basarme en librerías como Material UI o de frameworks como Tailwind CSS, quienes ya tienen definidos estos puntos y solamente es decidir con cuáles trabajaremos y con cuáles no. Por ejemplo:

· Breakpoints en Material UI

  • xs, extra-pequeño: 0px
  • sm, pequeño: 600px
  • md, medio: 960 px
  • lg, grande: 1280px
  • xl, extra grande: 1920px

· Breakpoints en Tailwind CSS

  • sm, pequeño: 640px
  • md, medio: 768 px
  • lg, grande: 1024px
  • xl, extra grande: 1280px
  • 2xl, doble extra grande: 1536px

Para nuestro cómic podríamos decir que los dispositivos en los que queremos que el diseño se vea muy bien son: iPhone 11, iPad Pro y MacBook Pro. Y, basado en esto, los puntos que decidimos escoger son xs, md y lg de Material UI.

Ahora llega una parte importante: escribir estos puntos de interrupción o breakpoints en nuestros media queries y hacer que nuestro código trabaje basado en esto.

Podemos trabajar con valores mínimos o máximos dentro de los media queries. La diferencia es que @media (min-width: 960px) {...} (por ejemplo) nos dice que es desde un valor de 960px en adelante que se va a ejecutar el código que él contenga y @media (max-width: 960px) {...} nos dice que es hasta un valor de 960px que se va a ejecutar el código que él contenga.

Personalmente, para no entrar en confusiones, me gusta trabajar con @media (max-width: 960px) {...} y ya sé que todo lo que esté dentro de este media query, abarcará los dispositivos que tengan un width menor a él.

Teniendo en cuenta lo anterior, solo tendríamos los dos siguientes breakpoints:

· Para todos los dispositivos donde su width sea menor o igual a 960px

El media query sería: @media (max-width: 960px) {...}

· Para todos los dispositivos donde su width sea menor o igual a 1280px

El media query sería: @media (max-width: 1280px) {...}

· Para todos los dispositivos donde su width sea mayor a 1280px

No tendríamos media query. El CSS se escribiría afuera de los media queries que ya establecimos y sólo incluímos en ellos las clases y valores que van a cambiar.

Ejemplo: Tengo un contenedor con un width de 100px y un height de 100px, pero quiero que sea azul en desktop, amarillo en tablet y rosa en mobile. Para eso tendríamos el siguiente código CSS:

.container {
    width: 100px; // Valor para cualquier dispositivo - No se añade a media queryheight: 100px; // Valor para cualquier dispositivo - No se añade a media querybackground: blue; // Valor para todos los dispositivos donde su width sea mayor a 1280px
}
@media (max-width: 1280px) { // Valores para todos los dispositivos donde su width sea menor o igual a 1280px.container {
        background: yellow; // Solo ponemos el valor que queremos que cambie
    }
}
@media (max-width: 960px) { // Valores para todos los dispositivos donde su width sea menor o igual a 960px.container {
        background: pink; // Solo ponemos el valor que queremos que cambie
    }
}

Como ya sabemos que queremos que existan 2 breakpoints para que nuestro diseño se vea bien en iPhone 11, iPad Pro y MacBook Pro, comenzamos a definir a nivel visual cómo queremos que se vea nuestro cómic en los diferentes dispositivos. Para ello, podemos hacer un dibujito como el siguiente:

Este esqueleto nos quedaría de la siguiente forma en HTML:

<divclass="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
</div>

Paso 2: Identifica las filas y columnas creando líneas imaginarias

Una vez tengamos nuestros diseños, empezamos a crear líneas imaginarias en ellos para:

  1. Identificar las filas y las columnas de nuestro contenedor.
  2. Ubicar nuestros elementos en el contenedor.

Paso 3: Crea las filas y columnas del contenedor para los diferentes dispositivos

Una vez tengamos identificadas las filas y columnas en nuestro dibujo, lo pasamos a nuestro código teniendo en cuenta los dispositivos, así:

· iPhone 11

· iPad Pro

· MacBook Pro

Paso 4: Ubica cada elemento en la cuadrícula dependiendo del dispositivo

Ya tenemos nuestras cuadrículas para los diferentes dispositivos. Ahora, llega el turno de ubicar cada elemento en estas cuadrículas y nuestras líneas imaginarias jugarán un papel muy importante.

Para ubicar cada elemento, usamos las propiedades grid-column y grid-row de la siguiente forma:

Si tuvieramos que ubicar los elementos 1, 2 y 3 en una cuadrícula, diríamos que:

  • El elemento 1 empieza en la línea 1 y termina en la línea 2 de izquierda a derecha y empieza en la línea 1 y termina en la línea 2 de arriba hacia abajo. Eso en CSS Grid sería como decir: grid-column: 1 / 2 (de izquierda a derecha) y grid-row: 1 / 2 (de arriba hacia abajo).
  • El elemento 2 empieza en la línea 2 y termina en la línea 3 de izquierda a derecha y empieza en la línea 1 y termina en la línea 3 de arriba hacia abajo. Eso en CSS Grid sería como decir: grid-column: 2 / 3 (de izquierda a derecha) y grid-row: 1 / 3 (de arriba hacia abajo).
  • El elemento 3 empieza en la línea 1 y termina en la línea 2 de izquierda a derecha y empieza en la línea 2 y termina en la línea 3 de arriba hacia abajo. Eso en CSS Grid sería como decir: grid-column: 1 / 2 (de izquierda a derecha) y grid-row: 2 / 3 (de arriba hacia abajo).

Con base en lo anterior, tenemos el siguiente código CSS para los diferentes dispositivos:

Puedes usar esta guía de colores: HTML Color Codes

· Desktop

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 5px;
  height: 100vh;
}
.containerdiv:nth-child(1) {
  background-color: Gold;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.containerdiv:nth-child(2) {
  background-color: Yellow;
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
.containerdiv:nth-child(3) {
  background-color: LightYellow;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.containerdiv:nth-child(4) {
  background-color: LemonChiffon;
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}
.containerdiv:nth-child(5) {
  background-color: LightGoldenrodYellow;
  grid-column: 3 / 5;
  grid-row: 2 / 3;
}
.containerdiv:nth-child(6) {
  background-color: PapayaWhip;
  grid-column: 5 / 6;
  grid-row: 1 / 3;
}
.containerdiv:nth-child(7) {
  background-color: Moccasin;
  grid-column: 1 / 2;
  grid-row: 3 / 5;
}
.containerdiv:nth-child(8) {
  background-color: PeachPuff;
  grid-column: 2 / 4;
  grid-row: 3 / 5;
}
.containerdiv:nth-child(9) {
  background-color: PaleGoldenrod;
  grid-column: 4 / 5;
  grid-row: 3 / 4;
}
.containerdiv:nth-child(10) {
  background-color: Khaki;
  grid-column: 5 / 6;
  grid-row: 3 / 4;
}
.containerdiv:nth-child(11) {
  background-color: DarkKhaki;
  grid-column: 4 / 6;
  grid-row: 4 / 5;
}

· iPad Pro

@media (max-width: 1280px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }
  .containerdiv:nth-child(6) {
    background-color: PapayaWhip;
    grid-column: 1 / 2;
    grid-row: 3 / 5;
  }
  .containerdiv:nth-child(7) {
    background-color: Moccasin;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
  .containerdiv:nth-child(8) {
    background-color: PeachPuff;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
  .containerdiv:nth-child(9) {
    background-color: PaleGoldenrod;
    grid-column: 3 / 4;
    grid-row: 3 / 6;
  }
  .containerdiv:nth-child(10) {
    background-color: Khaki;
    grid-column: 4 / 5;
    grid-row: 3 / 6;
  }
  .containerdiv:nth-child(11) {
    background-color: DarkKhaki;
    grid-column: 1 / 3;
    grid-row: 5 / 6;
  }
}

· iPhone 11

@media (max-width: 960px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(9, 1fr);
  }
  .containerdiv:nth-child(4) {
    background-color: LemonChiffon;
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }
  .containerdiv:nth-child(5) {
    background-color: LightGoldenrodYellow;
    grid-column: 1 / 2;
    grid-row: 4 / 6;
  }
  .containerdiv:nth-child(6) {
    background-color: PapayaWhip;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
  .containerdiv:nth-child(7) {
    background-color: Moccasin;
    grid-column: 2 / 3;
    grid-row: 5 / 6;
  }
  .containerdiv:nth-child(8) {
    background-color: PeachPuff;
    grid-column: 1 / 3;
    grid-row: 6 / 8;
  }
  .containerdiv:nth-child(9) {
    background-color: PaleGoldenrod;
    grid-column: 1 / 2;
    grid-row: 8 / 9;
  }
  .containerdiv:nth-child(10) {
    background-color: Khaki;
    grid-column: 1 / 2;
    grid-row: 9 / 10;
  }
  .containerdiv:nth-child(11) {
    background-color: DarkKhaki;
    grid-column: 2 / 3;
    grid-row: 8 / 10;
  }
}

Paso 5: Embellece tu cómic

Una vez hayamos ubicado los elementos en las cuadrículas para los diferentes dispositivos, tendremos un resultado como el siguiente:

Ahora, debemos embellecer nuestro cómic. Para ello, podemos hacerlo con sólo CSS (añadiendo textos o dibujos con CSS) o podemos añadirle imágenes.

Yo decidí hacerlo con imágenes y así quedó el resultado:

Paso 6: ¡Compártenos tu resultado en los comentarios!

¡Este paso es mi favorito! Compártenos en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS el resultado final de tu comic. 😄

Aquí te comparto mi codepen con el resultado final:

Además, cuéntanos qué otro tipo de retos te gustaría encontrar en esta nueva sección.

#NuncaParesDeAprender

Curso de CSS Grid Layout
Curso de CSS Grid Layout

Curso de CSS Grid Layout

Aprende CSS Grid Layout para maquetar sitios web complejos sin complicaciones. Analiza tus diseños, divide tu aplicación en cuadrículas y conviértelas en estilos CSS. Integra CSS Grid con Flexbox y el modelo de caja para alinear tus elementos exactamente donde deben estar. Descifra todos los misterios de CSS Grid Layout para convertirte en frontend developer profesional con tu profesora Estefany Aguilar.
Estefany
Estefany
teffcode

6815Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
9

Listo mi reto.
Espero les guste.
Creo que se puede ver bien desde los dev tools.
Cualquier sugerencia es bienvenida.
Captura de Pantalla 2021-05-27 a la(s) 11.40.19.png
Aquí les dejo el enlace por si lo quieren probar
Este me llevó más tiempo porque quise poner en práctica otras ideas que aprendí en otros cursos como el que estoy llevando un curso de Marketing Creativo para Marcas con Daniel Granata y me sentí inspirado.
Voy a mejorarlo en los próximos días para que cada imagen lleve a uno de los cursos que hice y sea un poco más útil para los demás.

1
un mes

Hola esta es la última versión. cambiando a etiquetas <img> para cada imagen para no perder las proporciones. Le puse alts descriptivos para que se pueda contar la historia con los dispositivos de audición y conecté las dos páginas. Más adelante cuando tenga más profes conocidos saco una tercera parte y así las voy uniendo.
Pueden verlo aquí 👇🏻
https://gustavolando.github.io/platzi-comic/
Captura de Pantalla 2021-05-30 a la(s) 00.28.28.png

Captura de Pantalla 2021-05-30 a la(s) 00.29.17.png
7
34314Puntos

Aquí mi proyecto 😃

Pueden verlo detalladamente aquí 👇

Comic Mario Bros

3
6815Puntos
un mes

Amé con todas las fuerzas de mi corazón !!! Te quedó maravillosoooo 😍 Muy, muy, muy TOP ✨👏🏼

4
7188Puntos

Primer Comentario !
Espere mucho este momento jajaj !! 😅🎆🌟
Completaré el reto y ya voy por la segunda clase del curso de Animaciones !
Muchas gracias @teffcode

4
2798Puntos
un mes

Segundo comentario XD
¡Vayamos a intentarlo!😁

3
6815Puntos
un mes

Hahahahahha Cristian ! hahah me alegra que seas el primer comentarioooo 🥰💚 Por aquí espero con ansias el resultado del retooo ✨ y qué emoción que estés en la segunda claseee… OMG !!! Lo máximooo ✨ Wiii

2
32027Puntos

Todos los proyectos publicados aquí son geniales 👍! Pronto haré el mío 😀

1

Profe,esta no es la idea,respecto dalos tutos que esta dando?. Yo le sugeri por el Twitter y me comento que la tomaria y estoy viendo que se esta aplicando.

2
117781Puntos
un mes

Randy, por supuesto que vamos a tener en cuenta tus sugerencias de tutoriales. Pero recuerda que no eres el único estudiante de la comunidad. Algunos otros tutoriales tienen prioridad.

Con esto claro…
¡Cuéntame tus ideas! 😄

1

Yo solo quiero que realicen un tutorial donde se haga un tutorial completo aplicado en un proyecto, si lo hace el profe de granda sería genial.

1
6Puntos

Hola soy nuevo pero kiero aprender

2
6815Puntos
un mes

Wiii ✨ Llegaste al lugar correcto 💚