Frontend Mentor – Solución al reto Bento Grid 🔥💪

Esta es mi solución 🔬 al reto Bento Grid en Frontend Mentor.

Tabla de contenidos

• Resumen
• Capturas de pantalla
• Enlaces
• Mi proceso
  • Tecnologías utilizadas
  • Lo que aprendí
  • Desarrollo continuo
  • Recursos útiles
• Autor

---

Resumen

Este reto consiste en poner a prueba las habilidades de estilizado. Se puede usar cualquier tecnología, y la idea es practicar lo aprendido; si surge alguna duda, esto motiva a aprender algo nuevo. El objetivo es crear una cuadrícula al estilo bento, con dos vistas: una móvil y otra de escritorio.

Captura de pantalla

Enlaces

• URL de la solución: GitHub
• URL del sitio en vivo: Demo

---

Mi proceso

Tecnologías utilizadas

• HTML semántico
• Mobile-first
• Tailwind CSS
• TypeScript: para dividir los elementos en componentes y trabajarlos de manera organizada
• Flexbox: para la vista móvil
• CSS Grid: para la vista de escritorio
• Vite: para inicializar el proyecto

Lo que aprendí

Al desarrollar este proyecto, aprendí cosas que había ignorado durante algún tiempo. Siempre que usaba Tailwind, lo hacía de forma bastante básica, y cuando no sabía cómo resolver algo, aplicaba pequeños parches con CSS puro. Aprendí a utilizar directivas y a organizar mejor mis estilos para evitar contaminar los estilos globales.

Desarrollo continuo

Noté algunos puntos de mejora. Lo que considero mi talón de Aquiles durante todo este proceso fue el diseño responsivo del texto: necesitaba que mantuviera cierta forma y estética, independientemente del tamaño de pantalla desde donde se visualizara. Esto lo solucioné usando clamp(). Además, la manipulación de imágenes fue un desafío; aunque logré que todo encajara, es un aspecto en el que debo seguir mejorando.

Recursos útiles

• Documentación de Tailwind – Para este proyecto me fue muy útil ir revisando la documentación de Tailwind a la par del desarrollo.

---

Autor

• Frontend Mentor – @Enmanuel-VE
• LinkedIn – Enmanuel Antoni Bracho Villanueva