Stats preview component [HTML-CSS]

Community feedback

• 

  P

  a-woodworth•290

  @a-woodworthPosted over 2 years ago

  Good job on completing this challenge. Your solution looks nice.

  Take a look at css mixed blend mode to learn more about adding color to images. There are a lot of ways to do this with code via combining images, gradients, etc

  Some links on the topic to get you started:

  • https://www.youtube.com/watch?v=TAA89nkEuhw
  • https://web.dev/learn/css/blend-modes/
  • https://blog.logrocket.com/creative-text-styling-with-the-css-mix-blend-mode-property/
  • https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  Happy coding!

  Marked as helpful

  2

  ---

  

  Juan Pablo Isaza•100

  @jisazampPosted over 2 years ago

  @a-woodworth hey! Thanks for taking the time. That’s some valuable info right there, I’ll take a look.

  Thanks again.

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Juan! 👋

  Regarding the image overlay, I also recommend using mix-blend-mode. I suggest adjusting the opacity of the image as well to make it match perfectly with the design. For your reference, you can see @DarrickFauvel's solution for this challenge.

  Some feedback.

  • The image is a decorative image. So, leave the alt="" empty.
  • There's no need to wrap the img element with the figure element. The only reason to use figure is if you need to include a figcaption. Otherwise img tag is fine (or wrap it with div instead).
  • The card__stats should be a list item. If the site has no styling, a list item would be the best choice. I like to think of the HTML page (no styling) as a document file. So, the heading is the same as the title, h2 is a sub-title, etc.
    • 10k+ companies
    • 314 templates
    • 12m+ queries
  • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.

  I hope this helps!

  Marked as helpful

  1

  ---

  

  Juan Pablo Isaza•100

  @jisazampPosted over 2 years ago

  @vanzasetia Hi Vanza,

  Thank you very much for all the recommendations, they have been really helpful, and I was also able to learn about some concepts that I didn't know. I think that's what this is all about, to be learning, and I was already able to implement some of the recommendations you made.

  P.S. I took a look at your profile, I like your approach that getting feedback and helping the community is the best way to learn. Maybe when I am better I can take this same approach.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @jisazamp No problem! 👍

  You can start giving feedback with the knowledge that you already have. You can give feedback about the visual design, let's say the color is not matching or there is too much margin on this element, etc.

  I recommend reading this article by Matt Studdert about How to get the most out of Frontend Mentor.

  0