Frontend Mentor | Product Preview Card Component with Next.js, Tailwind CSS coding challenge solution

Solution retrospective

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

I felt a great sense of satisfaction when I accurately implemented the responsive layout using CSS grid. However, I didn't solely rely on grid; I used flexbox for smaller components within the card, such as buttons. I'm particularly pleased with how I combined these two approaches to complete the project.

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

I grappled with whether to implement the mobile or desktop screen first. My conclusion is that generally, a desktop-first approach is better. It seems much easier to scale down from a larger screen to a smaller one than to expand from a small screen to a larger one. However, depending on the nature and circumstances of the project, a mobile-first approach might be more suitable in some cases.

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

I would be grateful for any tips or insights others have gained while working on this challenge.

Community feedback

Dylan Heslop• 620

@dylan-dot-c

Posted about 2 months ago

This is a great attempt, well done.

As it comes to mobile-first or desktop-first, I normally did desktop first because it was what I used to, that I stumbled upon a challenge that I did desktop first and when I was doing the mobile version I almost cried... Since then I always go for mobile-first, as for my reason its better to do from small to large and not vice versa, also that mobile looks better on desktop compared to desktop on mobile(silly reason). For me doing mobile first help me make better layouts.

Also another thing I find interesting, that is your logic for swapping Images, I recently discovered the <picture></picture> element in html, but that helps with swapping images automatically based on the viewport and im not sure but I checked on StackOverflow and it seems NextJs now supports it, so you should still be able to use the NextImage component for that.

Disclaimer: I haven't completed this challenge as yet.

Marked as helpful

JaceLee• 240

@jaceleedev

Posted about 2 months ago

@dylan-dot-c Thank you for your great opinion. Many people are using websites and applications on mobile devices, and the use of services on mobile is increasing compared to desktop. I also know that many startups create prototypes with only mobile views. Regardless of personal preference, the mobile-first approach seems important. I plan to proceed with the next challenge using the mobile-first approach as well.

I've learned about the <picture> tag before, but I didn't think of it at all for this project. Next time, when there is a case where the image source changes according to the viewport, I think it would be good to use the <picture> tag.

Thanks for the good tip. Happy coding!

Product Preview Card Component with Next.js, Tailwind CSS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community