Submitted about 2 months ago

Product Preview Card - React & Tailwind CSS

Justin Levy• 100

@justinsane

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

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of the design and how close it resembles the original.

I would employ a system to make it easier to transform the 'large screen' version to a 'small screen' version. This process took me quite a bit.

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

I had a challenging time reformatting the large screen design to small screen. I'm going to search out a system or method to make this easier.

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

Ways or tips to simplify the design process for both small and large screens.

Community feedback

Dylan Heslop• 620

@dylan-dot-c

Posted about 2 months ago

Oh hello there... heard you wanted a better process of turning larger screen designs into smaller one, well... I dont know if this count, but I always(since recently) go for mobile-first solutions(mobile-first desktop-last), they prove to be more efficient from what I have been through so far and I actually like it.

Justin Levy• 100

@justinsane

Posted about 2 months ago

@dylan-dot-c That's the advice I heard. For some reason I always tend to design for large screens first. Maybe that's because I'm designing on a large screen... Nevertheless, good advice. Thanks!

Alex• 3,130

@Alex-Archer-I

Posted about 2 months ago

Hi!

I can get you a hint about img tag. There is a picture tag which dynamically switch images according to media conditions.

<picture>
    <source srcset="mobile.jpg" media="(max-width: 900px)">
    <img src="desktop.jpg" alt="">
</picture>

There could be different source tags with various conditions. If no one of them matches than img would be rendered.

Also I'm not sure about a for the button. This project is out from context, but there are two possible situations here - the cart managed on the client side and then data sent to the server after the purchase, or all data about cart changing sent to server immediately. In the both cases there should be button tag (in the second case it would be type=submit button inside the form).

Hope that helps =)

Justin Levy• 100

@justinsane

Posted about 2 months ago

@Alex-Archer-I Good to know about the picture tag.

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