Stats Preview Card Component using CSS and Bootstrap

Community feedback

• Account deleted

  Hi JunWei

  Nice work and congratulations on finishing the project. I am a newbie like you and see that you have some HTML issues in your code. There is a very good site for helping you correct your HTML code and they have one for CSS as well if you need it.

  Marked as helpful

  1

  ---

  

  JunWei•30

  @junwei-tjPosted almost 3 years ago

  Hi @madzi-hove! Thanks for bringing my attention to validator sites - they look really useful

  0
• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Congrats on completing the challenge, @junwei-tj!

  It looks really good. I had a look at your final solution and I have a few suggestions that I hope will be useful to you:

  • Look into background-blend-mode and mix-blend-mode properties for the image overlay effect

  • On smaller screen sizes, consider adding more space in between the stats elements but reduce the space between them and the paragraph description

  Marked as helpful

  1

  ---

  

  JunWei•30

  @junwei-tjPosted almost 3 years ago

  Hi @Remus432, thanks for your suggestions! I have modified my code accordingly :)

  0
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi JunWei,

  Great solution, well done!

  • you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); this will help achieve the purple colour to match the design, rather than the overlay approach
  • you also need to explore background-blend-mode. (multiply usually does the trick)
  • also i've noticed you've done a fair amount of styling with IDs, this isn't best practice. IDs are meant to be unique which means they can't be re-used like classes which would help you write less code also you can run into specificity wars

  Happy coding 🤙

  Marked as helpful

  1

  ---

  

  JunWei•30

  @junwei-tjPosted almost 3 years ago

  Hi @darryncodes, thanks for the feedback!

  Getting the correct purple shade was a real headscratcher for me, so your suggestion was really helpful. However, to get the background showing on mobile, I had to set a height value for image-container-mobile. I'm wondering if there is perhaps a better alternative.

  With regards to the use of IDs, I relied on them more often for this project since most styles were element-specific (though I noticed I accidentally used id='image-overlay' twice - I changed it to a class). Is this still considered bad-practice?

  0

  

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  you're welcome @junwei-tj!

  I think you've nailed the colour but over complicated your code. For example you don't need the image-overlay div you could add the background image straight on the image-container div. Also you don't need duplicate the html, just swap the image with a media query (this is how I approached it).

  I'd steer clear of styling with ID's yes, this article does a good job to explain further: Reasons not to use IDs in CSS

  0