Stats Preview Card Component using HTML & SASS

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Nice job in completing this project. Regarding your solution, I would like to tell you the following that…

  • Adjust the background color of the main image into background-color: rgba(126, 20, 192, 0.6); in the .hero-overlay rule set
  • Increase the font size in .stats-header--heading rule set into font-size: 32px;

  On the contrary:

  • Proper use of semantic tags
  • Well organized HTML structure, neat and readable
  • Good job on the comment description of the links in the head tag
  • Use proper details of the design
  • The Sass files are well organized

  Above all, the project is done well. Keep up the good work! Cheers!

  Marked as helpful

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello , I have some suggestions regarding your solution :

  • You have misused the article tag read more about the article usages in mdn .

  • Using article it needs to be the whole component (the two halves).They all belong to the same one component.

  • I wouldn't use <section> for the stats . Read more aout usage notes.

  • You can use <ul> to wrap the stats class="stats-section flex flex-col" . Numbers don't make sense as < h2> s.

  • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

  • To improve the image overlay effect, I would prefer to leave the image in html and use blend modes. you can use background color, Use mix- blend mode and opacity to make it more like the design.

  • Read more how to write an alt text

  Overall , your solution is good, Hopefully this feedback helps.

  0