Frontend Mentor - Bento grid solution

This is a solution to the Bento grid challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device's screen size

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Alejo2304.github.io

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• TailwindCSS v4.1
• Vite

What I learned

How you must take care of the spaces, padding and gaps when working with responsive designs, ussualy if you have both an space and a gap at the same time, you may find unexpected behaviors on your webiste.

Also, learned how using the mobile-first workflow help us to apply responsivity in our website.

Continued development

I want to improve my abilities when working with the new CSS unit line-height [lh] as currently I am not sure of when to use it.

Useful resources

• TailwindCSS docs - This helped me to understand better the behind of the classNames of tailwind and how to apply them better.
• Traversy Media - React Crash Course - This is an amazing video from Traversy Media that really help me get to the cores concepts on React. Very recommended.

Author

• GitHub - Alejo2304
• Frontend Mentor - @yourusername