Submitted about 1 year ago

Product preview card component

Shahin Aliyarli• 680

@sliyarli

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello fellow designers and developers,

I'm thrilled to present to you my solution for the Product Preview Card Component challenge on Frontend Mentor. As a passionate front-end web developer with years of experience, I've put my skills to the test to create a visually appealing and functional product preview card. Now, I'm seeking your valuable feedback to make it even better. Could you please take a moment to answer the following questions?

Design Charm: What aspects of the product card's design do you find visually captivating? Feel free to share your thoughts on the color palette, typography, arrangement, and any other design elements that caught your eye.
Navigation Ease: While interacting with the card, did you encounter any challenges in terms of navigation? If you did, I'd greatly appreciate it if you could elaborate on the difficulties you faced. This will enable me to identify any user experience hurdles.
Impressive Features: Were there any specific features or functionalities in the card that you found particularly useful or innovative? Your insights into what resonated with you in terms of interactivity and user engagement would be tremendously valuable.
User Experience Boost: In terms of user experience, what suggestions do you have to enhance the card's usability? Whether it's about optimizing the layout, improving the responsiveness, or refining the information flow, I'm eager to hear your thoughts.
Performance Evaluation: How would you rate the performance of the product card in terms of loading speed and responsiveness? Did you notice any delays or inconsistencies while testing it on different devices? Your feedback on performance will contribute to a seamless user experience.
Areas for Advancement: Were there any areas where you believe further enhancements could be made? Whether it's about refining the product details, fine-tuning animations, or any other aspect, your insights are highly valued.

I genuinely appreciate your input as it will guide me in refining this product preview card to meet the highest standards. Feel free to share your thoughts openly, and if you have additional comments or suggestions beyond the questions listed above, please don't hesitate to share them.

Thank you for taking the time to review my solution. Your feedback is incredibly valuable, and I'm excited to learn from your perspectives.

Community feedback

Linas• 100

@getlinas

Posted about 1 year ago

Hey man, nicely done!

I've noticed that you're still using desktop image for mobile version of design. I don't have much experience yet and not sure about best practices, but I've recently learned a neat trick that seemed to be worth trying here (because of 2 different images that Frontend Mentor provided with files).

You also also check my code, I've just submitted same exercise. In short, I've used <picture> tag in HTML to set 2 different images depending on media rules. Here is that part of code, you might want to check that out:

<picture>
  <source media="(max-width: 799px)" srcset="images/image-product-mobile.jpg">
  <source media="(min-width: 800px)" srcset="images/image-product-desktop.jpg">
  <img class="image" src="images/image-product-mobile.jpg" alt="">
</picture>

Good luck!

Marked as helpful

Shahin Aliyarli• 680

@sliyarli

Posted about 1 year ago

Hey there, @getlinas! :)

that's a really interesting use of code! I didn't know we could use the picture tag like this!

Thanks for reaching out and sharing your approach to handling different images for desktop and mobile versions. Your use of the <picture> tag with the <source> elements and media queries is indeed a great way to ensure that the appropriate image is displayed based on the user's device.

In your example, you've provided a solution that swaps out images smoothly based on screen size. This can be particularly helpful in optimizing the loading time and user experience for different devices.

Regarding your approach of using a single image and zooming it for the mobile design using the background-image property, that's a creative way to handle the situation without using JavaScript. By adjusting the background positioning and possibly using background size, you can achieve the desired effect. This can also help reduce the number of image files that need to be loaded, which can contribute to faster page loading times.

It's great to see that you're thinking about different solutions and considering factors like image loading and responsiveness. Keep up the good work in your front-end development journey! If you have any more questions or want to discuss further, feel free to ask. Good luck with your coding projects! :)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord