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

Imerzion 120

@Imerzion

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?

Happy with the overall outcome on this one. Feel like I'm improving overall. Would advise myself in the future to take a little more time with the HTML structure as I had to re-jig it a little bit to make it work at desktop.

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

As stated above, had some trouble with my HTML structure when moving from mobile over to desktop. Had to re-write some of my HTML, but was a pretty simple fix overall.

Had some trouble with a gap displaying between the image at desktop, but Googled a fix for that pretty quickly.

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

Still feel like I'm having trouble when it comes to declaring widths of my containers.

Design appears to have a more vertical feel as opposed to my landscape outcome. Not sure what is causing such the drastic difference.

Community feedback

@iamporrrrrrrrr

Posted

The solution included semantic HTML. Maybe the dimensions of the boxes, texts, and paddings on the desktop version could be changed to more closely resemble the original design. The mobile version looks great. Overall, it is an excellent solution, and you have done well in creatin g a responsvie web design.

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