¡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
Te propongo que realices los siguientes 5 pasos para completar el reto:
💡 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!
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ú.
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:
grid es el contenedor principal de toda nuestra página.item es el contenedor de todas las comidas/bebidas.subitem es el contenedor de cada comida/bebida.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:
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:
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:
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í:
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:
¡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
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 😊
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.
grid: 1 columna de 80px, dos columnas del mismo tamaño y otra columna de 80px.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;
}
}
grid: 1 columna de 80px, 1 columna del tamaño disponible y otra columna de 80px.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
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:
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ú. 😄
La profe Teffy esta muy interactiva con nosotros y nos trae muchas actividades y cheatsheets interesantes 🤔 .
Me encanta ❤️
🥺❤️ Siempre es con todo el amor para nuestra comunidad !!!
Eso + la API de WhatsApp = tiendita virtual
Posdata: Esta muy genial el posts
Hahahaha tal cuál !
Listo.
Agregado a mis todo (to code) de esta semana.
Avanzo con los retos que tengo y lo hago para postearlo por acá!
Salud2!
Esoooo !!! Feliz de ver tu resultadooo 😍
Creo que una manera de aprender CSS es retarse a recrear cosas que vemos como pinturas o imágenes
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
🎉 😄 💚 🚀 ✨