Stats Preview Card Component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Joshua Caleb Bolito! 👋

  Here are some suggestions for improvements.

  • I would recommend using picture element to handle the image. Then, you can add media attribute to control which image should appear based on the condition.
  • For the statistic, I would suggest swapping the article with ul and wrap each list item with li. Also, the statistic number should not be h2 elements. It should be a list with three bullet points.
    • 10k+ companies
    • 314 templates
    • 12m+ queries
  • I recommend adding rel="noopener" to any anchor tags that have target="_blank". This is a security essential for external links. I suggest reading the web.dev article to learn more about this.

  That's it! I hope you find this useful! 🙂

  Marked as helpful

  1

  ---

  

  Joshua Caleb Bolito•50

  @JCBolitoPosted about 2 years ago

  @vanzasetia took your advice and edited the code! Thank you for your suggestions! 😁

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @JCBolito

  Great job on using a list element and adding rel="noopener" to all links that will open a new tab! 👏

  For the picture element, that is not the way of using it. You need to use source element. I recommend taking a look at the MDN documentation for picture element to learn how to use it.

  0
• 

  Franklyn Okenwa•260

  @franklynwisdomPosted about 2 years ago

  Hi Joshua,

  Kudos to you on completing the project, however, from my observation: -You made good use of HTML semantics -The layout looks good on all screen sizes, however, the mobile design is been displayed on a laptop of size 1280px and above, kindly make the proper adjustment on that. -Yes, the code is well structured and readable.

  Well done!

  Marked as helpful

  1

  ---

  

  Joshua Caleb Bolito•50

  @JCBolitoPosted about 2 years ago

  @franklynwisdom took your recommendation and edited the breakpoint of the media query from 1440px to 1000px in hopes to make it more responsive to tablets as well. Thank you for your suggestion! 😁

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Joshua Caleb, Congratulations on completing this challenge!

  To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.

  Here’s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

  Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  ✌️ I hope this helps you and happy coding!

  0
• 

  Franklyn Okenwa•260

  @franklynwisdomPosted about 2 years ago

  @JCBolito I just confirmed that you have made the necessary adjustments well done!

  0