Crea el Menú de un Restaurante Coreano con CSS Subgrid

Curso Profesional de CSS Grid Layout

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

¡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:

Haz el boceto de tu menú e identifica los elementos padres e hijos
Crea la estructura de HTML para el boceto que realizaste en el paso anterior
Usa CSS Grid y CSS Subgrid para definir las filas y columnas
Embellece tu menú añadiendo imágenes y otras propiedades de CSS
¡Compártenos tu resultado en los comentarios!
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:

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í:

<div class="grid">
  <div class="item">
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="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:

👩‍💻 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í:

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:

Color Names - HTML Color Codes → Nombre de colores por defecto en CSS
Color Hunt → Paleta de colores
Google fonts → Fuentes gratis
Pexels → Imágenes gratis

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:

ColorZilla → Para obtener colores

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

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

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: 80px repeat(2, 1fr) 80px;
  }
  .item {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
    grid-template-columns: subgrid;
  }
}

Boceto para celular

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: 80px 1fr 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í:

Deploy de Korean Drinks

Y este es mi repositorio:

Repositorio de Korean Drinks en GitHub

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í: