Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

product-preview

Louise 130

@atheenaoteyza

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

made this with love

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

I'm kind of skeptical on doing the mobile first, so I still did desktop first and it took a lot of changes in media query is this ok? please please check my code and recommend a better way thank you!

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

Did you do mobile first? how did you do it?

Community feedback

@R3ygoski

Posted

Hello Louise, congratulations on completing your project! It turned out identical to the proposed design—well done.

Regarding your question about mobile-first, I personally find this approach more practical nowadays. So, the best tip I can give you is to start by designing for mobile and, once you’re done, add a @media query —usually like this: @media (min-width: 768px)— and then proceed with the desktop design.

(Note: Instead of 768px, you can also use 1024px or even 1440px.)

Marked as helpful

1

Louise 130

@atheenaoteyza

Posted

@R3ygoski thanks! will definitely apply that tip :-)

1
D4WD 90

@devis4wd

Posted

Honestly, I'm still struggling too with the mobile-first approach. I still find the other way (desktop first) easier for building websites from scratch. I took this exercise as an attempt to get more familiar with it. On the other hand, consider this: If you stick to the mobile-first approach sometimes you'll be able to save some time and effort (cause desktop versions of websites are not always required nowadays). This is not true if you stick to the desktop-first approach ;)

Marked as helpful

1

Louise 130

@atheenaoteyza

Posted

@devis4wd thanks I thought I was the only one struggling with it haha, maybe I'll attempt doing the mobile first too and hopefully would see how is it more efficient

1
D4WD 90

@devis4wd

Posted

@atheenaoteyza you're definitely not the only one who's struggling with that ;)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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