Product Preview Card

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

WHAT I'M PROUD OF IN THIS CHALLENGE

• I'm finally getting the hang of flexbox. I still have a lot to learn in the flexbox arena.
• I properly utilised the mobile first approach in the legal way. I don't have multiple media queries that I used in my previous challenges.

WHAT I WILL DO DIFFERENT NEXT TIME

• I will use grid on my next challenges. That is a challenge for me right now.

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

CHALLENGES I ENCOUNTERED

• My main challenge was getting the mobile image to display on mobile device and desktop image to display on larger screens. This is how I went about it though;

.product-img-1 {
    border-radius: 1rem 1rem 0 0;
}

.product-img-2 {
    display: none;
}
@media screen and (min-width: 43.75em) {
    .product-img-1 {
        display: none;
    }
}

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

FRONTEND MENTOR COMMUNITY I NEED YOUR HELP IN THESE AREAS Kindly frontend mentor community review my code, help and correct me in these areas I had issues with;

• Displaying of the different images for mobile and desktop screen. If there is any way I could have done it better please let me know.
• I had a challenge in choosing the correct semantic HTML tags for the contents but I tried my best. If you find any issues related to this let me know.
• I am not so sure of my accessibility so kindly help me out here.