stats preview card using flexbox and grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Ugochi! 👋

  Regarding the purple shade for the image, I recommend using mix-blend-mode and then dropping the opacity of the image to 0.75. I suggest checking @DarrickFauvel's solution for this challenge. He has done a great job on making the overlay looks exactly the same as the design. 😉

  Some feedback:

  • I recommend using picture element to control what image should show up based on the user's screen size.
  • All the images are decorative so I recommend leaving the alt="". This way, screen reader users won't have to listen to unrelated content.
  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
  • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).
  • I suggest adjusting the breakpoint for the media query. Currently, 400px for mobile layout is too late.
  • I would recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  P.S. I recommend removing all the tags except the #accessibility one (probably) because the site is not built with Bootstrap, Materialize CSS, Tailwind CSS, and jQuery. For your information, it is possible to leave the tag empty. 🙂

  0

  ---

  

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  @vanzasetia Thanks for the mention, Vanza.

  1