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 component using HTML, SASS and BEM methodology

@stebanc

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


I'm trying to write clean HTML and CSS code, so any feedback will be appreciated.

Community feedback

@pikapikamart

Posted

Hey, great work on this one. Desktop layout looks nice, the responsive state could be improved since if you go at like point 780px, the layout itself is very stretched. I am using a 1366x768 monitor by the way. Mobile state looks great though.

Some suggestions would be:

  • Always have a main element to wrap the main content of the site. For this use main tag on the .container selector.
  • The section inside is not really needed and section only by itself is not informative as a landmark unless it is labelled by aria-labelledby attribute. Changing that one with a div would be really great.
  • You could use ul on the .card__footer selector since if you look at it, those items inside it are "list" of items about the company website.
  • Lastly, just for the layout issue being stretched while on the size that I mentioned :>

Aside from those, great job again on this one.

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