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 component

Md5 dalton 1,430

@md5dalton

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


Hello everyone👋

First time I timed myself while doing a challenge. It took me 4 hours to complete. I'd like to hear some feedback from anyone who has done a challenge similar to this one and how long it took them to complete.

Cheers👌

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi MD5 Dalton, good question, I'm also curious how long it takes to complete a challenge like this; since I've already done this one, I might find a similar one to do and time myself.

Great work here overall, and by the way, if you're wondering why the font family looks different in your screenshot compared to the design, it's because you're using the optical view version of this font. To make the screenshot look like the design's, you'll just need to copy the link again and uncheck the optical view box. As for other feedback, I think the only thing I would change is changing the div tags into inline text elements if they aren't doing anything particular (e.g., being used for flexbox), or just wrap the text in an inline text element, which would be better for semantic HTML than using a div for just text.

If I ever time myself, will be sure to let you know! 🙂

Marked as helpful

1

Md5 dalton 1,430

@md5dalton

Posted

I appreciate the hint @elaineleung, I've had my head spinning trying to figure out what the issue was with the screenshot😓.

I'll also swap those divs for the spans.

I'm looking forward to hear how you'd do on 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