47

Crea el Menú de un Restaurante Coreano con CSS Subgrid

17188Puntos

hace 3 años

¡Te doy la bienvenida a un nuevo reto de CSS! Esta vez vamos a crear el menú de un restaurante coreano con CSS Subgrid.

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

Te recomiendo tomar los siguientes cursos en Platzi para que puedas complementar todo lo que aprenderemos de CSS Subgrid y puedas sumergirte en la terminología de CSS Grid:

⚠️ Advertencia
En este momento CSS Subgrid solo es compatible con Firefox, por lo que te invito a realizar este reto en este navegador únicamente.

💡 Más información en la clase relacionada: Qué es CSS Subgrid

Paso 0: planeación

Te propongo que realices los siguientes 5 pasos para completar el reto:

  1. Haz el boceto de tu menú e identifica los elementos padres e hijos
  2. Crea la estructura de HTML para el boceto que realizaste en el paso anterior
  3. Usa CSS Grid y CSS Subgrid para definir las filas y columnas
  4. Embellece tu menú añadiendo imágenes y otras propiedades de CSS
  5. ¡Compártenos tu resultado en los comentarios!
  6. Extra: Responsive, deploy y código QR

💡 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!

1. Haz el boceto de tu menú e identifica los elementos padres e hijos

Para comenzar la estructura de HTML es muy importante tener claro qué necesitamos. Hacer un boceto o dibujo nos puede ayudar a entender mejor la cantidad de filas, columnas, ubicaciones y elementos en general. Este boceto puede variar dependiendo de la estructura de layout que queramos.

Yo decidí crear el siguiente boceto para el menú de bebidas coreanas:

CSS Subgrid

Aquí grid es el contenedor principal de toda la página, item es el contenedor de las bebidas y subitem es cada bebida del menú.

2. Crea la estructura de HTML para el boceto que realizaste en el paso anterior

Teniendo en cuenta el boceto y elementos que identificamos en el paso anterior, tendríamos una estructura de HTML así:

<divclass="grid">
  <divclass="item">
    <divclass="subitem"></div>
    <divclass="subitem"></div>
    <divclass="subitem"></div>
    <divclass="subitem"></div>
    <divclass="subitem"></div>
    <divclass="subitem"></div>
    <divclass="subitem"></div>
    <divclass="subitem"></div>
    <divclass="subitem"></div>
  </div>
</div>

Donde:

  • El elemento con clase grid es el contenedor principal de toda nuestra página.
  • El elemento con clase item es el contenedor de todas las comidas/bebidas.
  • El elemento con clase subitem es el contenedor de cada comida/bebida.

3. Usa CSS Grid y CSS Subgrid para definir las filas y columnas

En este paso la idea es tener dibujadas las líneas de nuestras columnas y filas. Esto es muy útil principalmente para tener una idea clara de lo que vamos a escribir en nuestro CSS.

De la imagen anterior tenemos para el elemento contenedor de clase grid:

  • 5 columnas del mismo tamaño
  • 4 filas con un mínimo de 100px y un máximo del valor que tenga el contenido

Esto en CSS se escribiría de la siguiente forma:

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
  background: pink;
}

De la imagen anterior tenemos para el elemento de clase item:

  • Ubicación de la columna 2 a la columna 4.
  • Ubicación en la fila 3.
  • 3 columnas del mismo tamaño (aquí como el elemento se encuentra ubicado en 3 columnas, podemos decirle que tenga esas mismas 3 columnas de su padre con CSS Subgrid).
  • 3 filas con un mínimo de 100px y un máximo del valor que tenga el contenido.

Esto en CSS se escribiría de la siguiente forma:

.item {
  display: grid;
  grid-column: 2 / 5;
  grid-row: 3 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, minmax(80px, auto));
  background: hotpink;
  border: 2px solid white;
}

De la imagen anterior tenemos para el elemento de clase item:

  • 1 columna del tamaño disponible
  • 3 filas con un mínimo de 80px y un máximo del valor que tenga el contenido

Esto en CSS se escribiría de la siguiente forma:

.subitem {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(80px, auto));
  background: papayawhip;
}

.subitem:nth-child(2n+1) {
  background: lightyellow;
}

Y el resultado se vería de esta forma:

Css subgrid

👩‍💻 Aquí puedes ver el código con el resultado en CodePen (recuerda visualizarlo desde Firefox): CSS Subgrid Layout

Puedes visualizar las líneas que generan la cuadrícula dándole click en la rejillita que aparece en el valor grid de la propiedad display que aparece en el inspector del navegador Firefox, así:

CSS Subgrid

4. Embellece tu menú añadiendo imágenes y otras propiedades de CSS

En este paso quiero que seas muy libre para escoger los colores, tamaños de fuentes y tipografías. A mí me gustan mucho las siguientes páginas:

También te dejo una extensión de Chrome que te permite, entre otras cosas, obtener el código (en hexadecimal, RGB o HSL) de un color que te guste desde cualquier punto de tu navegador:

5. ¡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 menú. 😄

👩‍💻 Aquí te comparto mi codepen con el resultado final: Korean Drinks en CodePen

CSS Subgrid

También puedes contarnos qué otro tipo de retos te gustaría encontrar en esta nueva sección.

#NuncaParesDeAprender

6. Extra: Responsive, deploy y código QR

Este paso es adicional. Aquí puedes hacer el responsive de tu página, el deploy con GitHub Pages y generar el código QR para poner en tu restaurante 😊

6.1. Haz que tu diseño se adapte a pantallas de dispositivos móviles

En este paso haremos que nuestra página se vea bien en dispositivos más pequeños para que luego podamos escanear un código QR desde nuestro celular o tablet directamente desde el restaurante. 🤯

Para ello debemos dibujar nuevamente nuestro boceto con la cantidad de filas y columnas que deseamos para cada dispositivo.

Boceto para tablet

CSS Subgrid
  • Para grid: 1 columna de 80px, dos columnas del mismo tamaño y otra columna de 80px.
  • Para item: Ubicarlo entre las columnas 2 y 3, y en la fila 3. También, crear 2 columnas como su padre (para esto, hacemos uso de CSS Subgrid).
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 80pxrepeat(2, 1fr) 80px;
  }
  .item {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
    grid-template-columns: subgrid;
  }
}

Boceto para celular

CSS Subgrid
  • Para grid: 1 columna de 80px, 1 columna del tamaño disponible y otra columna de 80px.
  • Para item: Ubicarlo en la columna 2, y en la fila 3. También, crear 1 columna como su padre (para esto, hacemos uso de CSS Subgrid).
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 80px1fr 80px;
  }
  .item {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    grid-template-columns: subgrid;
  }
}

👩‍💻 Aquí puedes ver el código con el resultado en CodePen (recuerda este también visualizarlo desde Firefox): CSS Subgrid con Responsive Design

6.2. Haz el deploy de tu página

Vamos a hacer el deploy de nuestra página con GitHub Pages (también puedes usar Netlify, Heroku o cualquier otra herramienta de tu preferencia).

💡 Aquí puedes seguir estos sencillos pasos para hacer el deploy: Getting Started with GitHub Pages

El mío quedó así:

Y este es mi repositorio:

6.3. Genera el código QR de tu página

La idea en este paso es simular que ya tenemos nuestro restaurante y que en la mesa estará el código QR que nos llevará a la página que acabamos de crear para ver el menú.

Para generar el código QR puedes usar un generador online como ME QR.

El mío quedó así:

¡Hemos terminado! Compártenos en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS el resultado final de tu menú. 😄

Estefany
Estefany
teffcode

17188Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
6
41108Puntos

La profe Teffy esta muy interactiva con nosotros y nos trae muchas actividades y cheatsheets interesantes 🤔 .
Me encanta ❤️

3
17188Puntos
3 años

🥺❤️ Siempre es con todo el amor para nuestra comunidad !!!

4
29787Puntos

Eso + la API de WhatsApp = tiendita virtual

2
29787Puntos
3 años

Posdata: Esta muy genial el posts

2
17188Puntos
3 años

Hahahaha tal cuál !

4
25515Puntos

Listo.
Agregado a mis todo (to code) de esta semana.
Avanzo con los retos que tengo y lo hago para postearlo por acá!
Salud2!

2
17188Puntos
3 años

Esoooo !!! Feliz de ver tu resultadooo 😍

2
69215Puntos

Creo que una manera de aprender CSS es retarse a recrear cosas que vemos como pinturas o imágenes

1
25515Puntos
3 años

Yo personalmente quiero proponerme hacer un proyecto web con cada uno de los retos de Hacker Rank o de Coder Byte para darle un poco más de sentido a crear algoritmos y para practicar HTML y CSS

2
3222Puntos

Esta excelente este tipo de dinámicas ya que son retos sencillos pero que implican la utilización de varias herramientas con un contexto real

1
17188Puntos
3 años

🎉 😄 💚 🚀 ✨

1
14594Puntos

Por fin terminé este reto! Estuvo muy interesante.
Dejo mi QR para que puedan verlo
korean-menu-qr.png

2
14594Puntos
3 años

Teniendo en cuenta que desde un computador seguramente no se pueda escanear el código QR, dejo también el link.
(Considerar que solo funciona correctamente desde Firefox por el tema de subgrid!)