Frontend Mentor | #Frontend Mentor - Product preview card component solution coding challenge solution

Solution retrospective

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

I could complete the project without much headaches like the previous one. It was easy and I would try using react to test my understanding next time.

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

I encounter a specificity issue when trying to style a span element. I initially gave the span a colour and tried to change the colour later in the CSS but didn't quickly understand why. I was able to fix the problem using the css !important property but I didn't want the fix. So, I had to remove the span from the group style I created and style it separately.

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

I can manage on my own, at least for now.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 2 months ago

Hey there! 🙋🏽‍♂️

Congrats on finishing the challenge! ✅

Your project looks awesome!

Here's a tip that might interest you:

📌 When you have different versions of the same image, consider using the <picture> tag.

This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

Example:

<picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

Hope you find this useful!

Great job overall!

Marked as helpful

adewalemudasiru• 120

@adewalemudasiru

Posted 2 months ago

Thanks for your feedback. I thought of using the picture tag but I wasn't sure about the implementation. With the example code you have provided for the HTML, how do I use/call for the right image in CSS or does the browser automatically recognise the right image for the screen size and set it? @danielmrz-dev

Daniel 🛸• 44,230

@danielmrz-dev

Posted 2 months ago

@adewalemudasiru

You don't need to call it with CSS (media queries). You just set the two versions inside picture tag and it will automatically switch depending on the screen size.

adewalemudasiru• 120

@adewalemudasiru

Posted 2 months ago

I tried the picture tag element and got it working. It's really useful. Thanks @danielmrz-dev

Daniel 🛸• 44,230

@danielmrz-dev

Posted 2 months ago

@adewalemudasiru I'm glad I could help! ✅