Skip to content
Submitted 29 days ago

Stats Preview Card (HTML, SCSS, JS, Grid, Flexbox)

Natali 👻 Grimm•1,150
@Grimm-N
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

What are you most proud of, and what would you do differently next time?

I'm glad I was able to use mix-blend-mode instead of the :befor method or an additional element with a transparent background! It simplifies the code and makes it more elegant.

What challenges did you encounter, and how did you overcome them?

It seems like I need to fill this section out right away because I'm trying to remember what challenges I faced in the project, but honestly, I can't recall what was tough! 😅

What specific areas of your project would you like help with?

As always, I'm open to any advice, feedback, and constructive criticism. I really appreciate it, and it helps me learn! 😊

Community feedback

  • Natali 👻 Grimm•1,150
    @Grimm-NPosted 29 days ago

    These automatic screenshots of my site don't do it justice since the animated content makes the card look empty. 😅

    1
  • KapteynUniverse•2,150
    @KapteynUniversePosted 29 days ago

    Great additions as always. First time seeing the content property used without before or after pseudo elements. Is there a reason to not write image path to the src attribute and use content?

    0
    Natali 👻 Grimm•1,150
    @Grimm-NPosted 29 days ago

    Hi @KapteynUniverse !

    Using the content property for images definitely has its pros and cons.

    Pros:

    Styling Control: It allows you to change the image's style directly in CSS without touching the HTML.

    Flexibility: You can quickly adapt the design without editing the content.

    Cons:

    Accessibility: You can’t add an alt attribute, which is crucial for screen readers.

    Semantics: Images that convey content should ideally be placed with an <img> tag for better meaning.

    Performance: Browsers are optimized for loading images via src, which can improve speed.

    So, if the image is important to the content, it’s better to use <img>. If it’s just decorative, using content can work, but just keep accessibility in mind!

    2

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