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 Challenge Flex-box, Sass

Krzysiek 120

@KrzysiekLu

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


Any advice is welcome :)

Community feedback

PhoenixDev22 16,950

@PhoenixDev22

Posted

Hello ,

  • Use an unordered list with 3 items for the stats .The number and word have to be read together to make sense so need to be in the same meaningful element. so only a <span> or maybe <strong> tag needs to wrap the numbers. (You can set those to be display block via a class).And the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

  • You can use <p> instead of <div>in <div class="main-paragraph">.

  • Don't capitalise in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalised text as they will often read them letter by letter thinking they are acronyms.

  • You're using width in percentage. Not a great idea as you're losing control of the layout. Use max-width instead, let it grow to a point.

  • Don't change the html or root font size. This has huge accessibility implications for those of us with different font size or zoom requirements. Think about whether you really need to do this .

hopefully this feedback helps.

Marked as helpful

0

Krzysiek 120

@KrzysiekLu

Posted

@PhoenixDev22 That what you wrote is super helpfull. Thank you .

1

@ValBocquet

Posted

Hi ! In the mobile version, the bottom of the page is not correct. We can't see the queries number. Else, good job !

Marked as helpful

0

Krzysiek 120

@KrzysiekLu

Posted

@ValBocquet Yes. My bad :D. Thank you.

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