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
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card Component - HTML5, CSS and Flex

P
Robert McGovern• 1,095

@tarasis

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


No real questions, but any tips or thoughts welcomed.

The mobile solution is pretty much identical, but desktop is off a bit. I chose not to try and chase it down through iteration.

Community feedback

darryncodes• 6,430

@darryncodes

Posted

Hi Robert,

Love the solution, good work.

Two observations at a glance you could consider:

  • margin: 0 auto; would nicely centre your mobile design
  • you might want to wrap this Get <span>insights</span> that help your business grow. in a h1 tag for semantics and accessibility reasons.

Happy coding!

1

P
Robert McGovern• 1,095

@tarasis

Posted

@darryncodes Good points, thank you. Wasn't even really thinking about the "Get ..." being a header.

0
Ahmed Faisal• 5,095

@afrussel

Posted

Use font size in body is a better practice. After body tag use main section article for each area is good for best practice

1

P
Robert McGovern• 1,095

@tarasis

Posted

@afrussel Thank you for the point about font-size, the reason I put it in html was for using rem units. Per css-tricks article its the place to put it for that.

"that rem unit is relative to the font-size of the <html> element, which is the document root. So, whatever is set as the user-default at the root level is what the .module class will scale to." https://css-tricks.com/html-vs-body-in-css/

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