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

Mobile First - Stats Preview Component

Massoud 170

@Massoud5

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


You can give me a better solutions!

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. Layout in desktop looks great, it is somehow responsive but when it occurs on the mobile breakpoint, the image is not occupying the whole width of the container.

Some suggestions on the site would be:

  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
  • The .attribution should be footer so that it is contained inside a landmark element as well.
  • On the li tag, don't just use span to wrap those text, use a meaningful element like p tag on it.
  • Lastly, just adjusting the img to occupy full width on a mobile breakpoint.

Just those only, actually the markup seems great, just missing some elements. Aside from those, great job again on this one.

Marked as helpful

0
jason12119 140

@jason12119

Posted

I just see that the purple image overlay is much lighter than in the preview. Other than that, I think you nailed it.

Marked as helpful

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