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

Stats Preview Card Project

@ShinjiX-Web

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello Front-End Peeps,

Completed the challenge. A feedback is very welcome! Thanks

Community feedback

@mikestopcontinues

Posted

Hey, you got this really close to the design. Nicely done.

Here's some thoughts I would offer as a lead dev on your team:

  1. Designers are very picky about their designs. Can you update your design so that the overlay color is closer to the design?
  2. I think the design gets responsive too early. It should collapse for mobile only when the browser window is very close to the component. Use the padding from the mobile design image as a guide.
  3. I notice your HTML can be a bit more semantic. This widget would only be part of a larger design, so it should be a section, not an article. (Articles are for long content, or for excerpts of long content.) Similarly, you wouldn't use section within a section. The inner sections should be plain divs. Lastly, it's best practice to never skip heading levels. Where you have h1, I would use h2. After all, this would be part of a larger web page, and the full page will have an h1 for everything.

Marked as helpful

0

@ShinjiX-Web

Posted

@mikestopcontinues thanks for the feedback. Helpful one Cheers!

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