Responsive, Accessible Product Component

What are you most proud of, and what would you do differently next time?

Hello, I'm Steven and this is my solution for this challenge using SCSS and BEM!😊

🛠️ Built with:

• HTML 🧾
• Native CSS 🎨
• BEM Notation 🅱️

Thank you to the Front-End Mentor team that creates these challenges that help us learning journey to front-end.💟

I’m most proud of finding solutions to the problems I encountered. I figured out that the slight gap was due to the image element's default display: inline; property, and the solution was to set the display to block. I also used Lighthouse in Google DevTools for the first time to help with accessibility.

What challenges did you encounter, and how did you overcome them?

• Unexpected Gap Issue:
  There was a slight gap between my image and the bottom div that wasn't due to padding or margin. I discovered this was because the image element has a default display: inline; property. The solution was to set display: block on the image to remove the gap.

• Accessibility Warning:
  Using Lighthouse in Google DevTools, I received a warning that "Image elements do not have explicit width and height." After reading some documentation, I decided not to worry about performance improvements at this stage.

• Understanding srcset Behavior:
  I initially had issues with the srcset attribute, as it lets the browser choo

What specific areas of your project would you like help with?

There is still so much I don’t know, but I am learning more with every challenge. I would like to use Google DevTools more effectively to help me build in the future, but I don’t fully utilize it because I am unaware of all that it can offer. Any advice or guidance on using DevTools is highly welcome and encouraged.