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
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

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: Frontend Mentor
• Live Site URL: GitHub Pages

My process

Built with

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

What I learned

In this project, I learned how to make cards by wrapping the cards in a <ul>. Add box-shadow on the card is shown on hover and pressing TAB on keyboard to move to different cards.

HTML and CSS Snippets below:

<ul>
  <li>
    <article></article>
  </li>
</ul>

.card__list-item:is(:hover, :focus-within) {
  box-shadow: 0 0 0 0.25rem;
}

Useful resources

• Cards - I used this article to help me build the cards in the Bento grid layout.

Author

• Frontend Mentor - @bccpadge
• LinkedIn - @rebeccapadgett121

Acknowledgments

Bento grid solution - This solution helped me with the bento grid layout and CSS styles for titles.