Skip to content
Submitted almost 3 years ago

Stats Preview Card

Francis•260
@FrancisKhaledKhodja
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

The difficulties in this challenge has been for me the following elements:

  • The positions of the elements that are very different between the desktop view and the mobile view: for instance, the position of the image.
  • The color of the picture with a pink/purple color. I implemented a layer with an opacity of 0.5 but I am not satisfied by the result: first I add an html element to integrate this layer (in the index.html) and the rendering is more clearer than the model.

Community feedback

  • Remus D. Buhaianu•3,125
    @MiculinoPosted almost 3 years ago

    Congrats on completing the challenge, @FrancisKhaledKhodja!

    Your design is pretty much pixel perfect. I had a look through your code and final solution and I have a few suggestions:

    • On resolutions smaller than 390, the top part of the card gets cropped. There isn't enough space around the card

    • Don't use fixed widths and heights, especially with px unit - it's a bad practice for creating layouts that are difficult to be made responsive

    • You don't need absolute positioning to center your container. You can do that in other ways as well https://www.youtube.com/watch?v=njdJeu95p6s&ab_channel=Fireship

    Marked as helpful
    0
    Francis•260
    @FrancisKhaledKhodjaPosted almost 3 years ago

    @Remus432 Thanks. I am going to watch your suggestions

    0
    Francis•260
    @FrancisKhaledKhodjaPosted almost 3 years ago

    @Remus432 Hello, I try your last point to center my container but it is too early for me: I don't control the grid concept yet. For your second point I try to use rem instead px for the next challenge but not very sure too use it correctly...

    1
    Remus D. Buhaianu•3,125
    @MiculinoPosted almost 3 years ago

    @FrancisKhaledKhodja No worries, take your time. It's a process where you have to take it step by step.

    These tutorials might help you:

    https://www.youtube.com/watch?v=rg7Fvvl3taU&ab_channel=KevinPowell https://www.youtube.com/watch?v=_-aDOAMmDHI&ab_channel=KevinPowell https://www.youtube.com/watch?v=IWFqGsXxJ1E&ab_channel=KevinPowell

    0
    Francis•260
    @FrancisKhaledKhodjaPosted almost 3 years ago

    @Remus432 Thank you

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

    Greeting FrancisKhaledKhodja , Well done your solution is really good. I have few things to suggest:

    • Wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more

    • Use responsive units as rem or sometimes em unit instead of px . Using px will not allow the changing the root font-size of the document will cause the rest of the site to scale up/down.

    • Use semantic tags ahead of div's.

    You can use mix-blend-mode: multiply; it's quite close to the challenge for the image.

    I really hope hope this feedback helps. Happy coding

    Marked as helpful
    0
    Francis•260
    @FrancisKhaledKhodjaPosted almost 3 years ago

    @PhoenixDev22 Thanks a lot for your feedback

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

    @FrancisKhaledKhodja Sorry I forgot to attach the link to BEM . Read more about BEM

    0
    Francis•260
    @FrancisKhaledKhodjaPosted almost 3 years ago

    @PhoenixDev22 Thanks

    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