Skip to content
Submitted almost 3 years ago

Stats preview card component solution using CSS Grid and Flexbox

Manon cabret•180
@GirafOnTrip
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone !

Feel free to comment below if you want to share some advices/tips I'll read them carefully :)

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Greeting @GirafOnTrip ,

    I have some suggestions regarding your solution :

    There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution). no need for <header>.

    • 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 can use <ul> to wrap the class="ctn2" . Don't use <span> and <div> for meaningful content.

    • 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. 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).

    • To improve the image overlay effect you should use blend modes. you can use background color, Use mix- blend mode and opacity to make it more like the design.

    • To center the component on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>.

    body{
display:flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;/*
}

    • Never use px for font size.

    • In line-height: 1.7em ;, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

    • Check the responsiveness again.

    Overall , your solution is good, Hopefully this feedback helps.

    Marked as helpful
    0
    Manon cabret•180
    @GirafOnTripPosted almost 3 years ago

    @PhoenixDev22 Thanks a lot for your precious advices ! I'll use all of them and see what's happen !

    1
  • Ryan Barnes•250
    @barnesPosted almost 3 years ago

    Looks great! Give the responsive styling a shot. That seemed like the trickier part on this one, I learned a good deal working through it myself.

    Marked as helpful
    0
    Manon cabret•180
    @GirafOnTripPosted almost 3 years ago

    @barnes Thank you for your feedback ! Yes, now I have to practice responsive. I will post the other solution in the next few days. Can't wait to test ;)

    0

Please log in to post a comment

Log in with GitHub

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