Stats Preview Card Component 🎯 [ Bootstrap -- reactjs -- css3]

Community feedback

• 

  

  Grace•32,170

  @grace-snowPosted almost 2 years ago

  Hi

  This looks pretty broken for me on mobile because you've limited the height to 100vh. Never ever limit height on elements that contain text in particular. Changing to min-height should fix the problems. (I'll add images to discord so you can see the breakage)

  Looking at this, you really do not need bootstrap at all. All that's doing is adding loads of bloat. Your css would hardly be much different without it.

  In my experience, when learners lean on bootstrap all it does is slow down learning and bloat their solutions. Practice without it and you can try it later really easily once you've embedded the foundational skills of html css and js

  Other feedback

  1. The component and everything within it should not have a width. Use max-width instead on the component. There should be no,explicit widths on heading or paragraph etc
  2. It would be simpler to apply border radius to the component along with overflow hidden. Then you don't need to change individual corners anywhere
  3. You don't need an overlay like this with position absolute. Totally unnecessary. Instead, that half of the component needs the purple background color and the image needs mix-blend-mode and opacity
  4. It is better for performance to load the font in html head instead of in the css file
  5. If you consider this image to be meaningful content, you must describe it properly in the alt attribute! If you think it is a decorative / non-meaningful image, alt should be blank
  6. Why have you used a h3?
  7. You must rewrite the html of the statistics. Numbers like 10k make no sense at all as headings. Instead, this part of the content should be one unordered list with 3 list items inside. The numbers can be wrapped in strong or span elements and set to display block and any other styles you need
  8. Do not capitalise text in html. Do that in css
  9. Use landmark elements. Every page should at least have a main

  I think you have some html understanding missing actually. This article about translating a design to html should help you

  Marked as helpful

  0
• 

  Syed Jamil Hussain Shah•140

  @Hsyedjamil1Posted almost 2 years ago

  Thank you so much

  0