Submitted 6 months ago

Product Preview Card project

alvarozama•360

@alvarozama

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This was the first Frontend Mentor project where I took a mobile-first approach. I think the look of the preview card for mobile and desktop screen sizes is well accomplished. Also this didn't take as much time as I thought it would, even though I could still invest a little more time in polishing some bits.

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

The whole going from mobile to desktop was a bit of a challenge. However, the trickiest part was changing the img element's src according to the screen size. Ultimately I found a simple solution, but it took me a bit of time to figure it out.

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

Same as last time, the breakpoints for media queries are still something I struggle with. Also, for the sake of brevity, I just used the breakpoints for 475 and 1024px screens, so the transition from one to the other is really messy. I intend to work on implementing a solution to make the whole transition more steadily responsive.

Community feedback

pablodev•430
@PabloodevPosted 6 months ago
Hello buddy 😊

Congratulations on completing your solution and especially for using the mobile-first method!

In HTML maybe you should use the picture tag.

It will load the image according to the screen size as in the example below:

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

Maybe it would be interesting to change some <P> to <span> to leave only what is really paragrade as <P> which in this case is the descriptive text of the perfume.

Speaking of visibility, when I opened the live site in my browser, the perfume box was not centered, maybe you should set an auto margin or use flex-box!

A practice that can help you is to define a pre-reset of the CSS, as it already comes with some pre-styles that can hinder you.

Finally, I recommend that you tidy up your github folder, delete what is not necessary, write your documentation and readme.

If these tips helped you, please mark it as "helpful"

Congratulations my friend!
Marked as helpful
0
Quocc1•70
@Quocc1Posted 6 months ago
Almost perfect. Keep going!
0

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