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
• Acknowledgments

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: https://www.frontendmentor.io/solutions/bento-grid-solution-9v1zsubnwN
• Live Site URL: https://heygauravshukla.github.io/bento-grid

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

• About the document structure.
• How drop shadows work in CSS.
• Use of negative margins in CSS.
• Usefulness of grid template areas.

Continued development

In future projects, I will

• Prioritize semantics while writing the markup.
• Leverage the power of CSS custom properties to make customizable interfaces.

Useful resources

• Kevin's YouTube video on bento grid

Author

• Website - Gaurav Shukla
• Frontend Mentor - @heygauravshukla
• Twitter - @heygauravshukla

Acknowledgments

I learned a lot from Kevin Powell. Huge thanks to him. Also the Frontend Mentor team for providing such a rewarding challenge.