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 Card

Austin 310

@Absynthee

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?

I didn't look up too much for this project, and I experimented with CSS nesting. Next time I'd hopefully just write the code much cleaner and more efficient.

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

A simple design but it took a lot longer than expected. Mostly getting the image right on both desktop & mobile since it's a different image on each layout. I used two different divs and hid the one that wasn't needed. That is probably not the best way to do it, but it works!

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

Any feedback regarding CSS nesting, responsive flex, custom CSS properties... or just anything haha. All comments are appreciated. Thanks!

Community feedback

Austin 310

@Absynthee

Posted

Not sure why the image isn't previewing properly on the github page & in the screenshot above. You can see it in the screenshot in my repository here: https://github.com/Absynthee/product-preview-card-component-main.

Edit: fixed the above problem, but my new generated screenshot is not ideal!

Edit2: fixed above issue after generating new screenshot. Perhaps just some caching issue? Either way, happy with the result now.

0

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