Skip to content
Submitted about 2 years ago

Stats Preview Card | HTML CSS

Julián Andrés Montes García•150
@JuliMontes
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

Me gustaría conocer tu opinión sobre este proyecto.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @JuliMontes, congratulations on your first solution!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

    img {
mix-blend-mode: multiply;
opacity: 80%;
}

    Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but all sizes as well.

    IMPROVE YOUR WORKFLOW using VSCODE you can code your whole page using px and then in the end use a plugin called px to rem here's the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Julián Andrés Montes García•150
    @JuliMontesPosted about 2 years ago

    @correlucas Muchas gracias por tus sugerencias, ya las he implementado.

    0
  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey @JuliMontes, great job on this project!

    Some suggestions to improve you code:

    • To properly center your content to your page, add the following to you <body> element:
    body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
    • When using images that are different size for different breakpoints, its’ far more effective to use the <picture> element. By using this element not are able to use different size images, you can also save on bandwidth, meaning your content loads faster.

    The background-image property is used for decorative images.

    Syntax:

      <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

    Source:

    https://www.w3schools.com/html/html_images_picture.asp

    https://web.dev/learn/design/picture-element/

    • To make you content accessible to your users, it is a best to use rem/em instead of px for your CSS property values. For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

    Sources:

    https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

    https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

    Happy Coding!

    Marked as helpful
    0
    Julián Andrés Montes García•150
    @JuliMontesPosted about 2 years ago

    @vcarames Muchas gracias por tu explicación lo tendré en cuenta para mejorar el proyecto.

    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