43

Crea el Menú de un Restaurante Coreano con CSS Subgrid

8765Puntos

hace un mes

Curso Profesional de CSS Grid Layout
Curso Profesional de CSS Grid Layout

Curso Profesional 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 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ú. 😄

Curso Profesional de CSS Grid Layout
Curso Profesional de CSS Grid Layout

Curso Profesional 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

8765Puntos

hace un mes

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

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

3
8765Puntos
un mes

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

4
24028Puntos

Eso + la API de WhatsApp = tiendita virtual

2
24028Puntos
un mes

Posdata: Esta muy genial el posts

2
8765Puntos
un mes

Hahahaha tal cuál !

4
11523Puntos

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
8765Puntos
un mes

Esoooo !!! Feliz de ver tu resultadooo 😍

2
686Puntos

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
8765Puntos
un mes

🎉 😄 💚 🚀 ✨

2
9124Puntos

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

1
11523Puntos
un mes

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

1
8141Puntos

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

1
8141Puntos
un mes

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