stat preview card using Html/CSS

Community feedback

• 

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  Hello Ildrim and congrats on finishing this challenge 👏! Here are my suggestions:

  • There is way too much usage of margin and padding in your css ! for texts you can use text-align:center and text-align:left and you don't need any margin on them.
  • Give border-radius:10px and overflow:hidden to the parent element instead of giving border-radius to children separately.
  • Instead of giving margin to children, give a padding to parent so everything will align nicely.
  • for stats I think you'll be better off with something like

  <ul>
        <li>10k+<span>companies</span></li>
        <li>314 <span>templates</span></li>
        <li>12m+ <span>queries</span></li>
  </ul>
  

  You don't need seperate ul for each single stat.

  • for centralizing your element you can use

  display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
  

  on your body instead of giving static margin to the elements.

  • Make sure to give width:100% and then max-width:...px so your design won't break on smaller screens.
  • There is no need for p-div you can style p itself instead.

  ✅ Also I opened a pull request to your repository which will fix some of these issues

  I hope this was helpful

  Marked as helpful

  4

  ---

  

  Ildrim•50

  @IldrimPosted about 3 years ago

  hello @Yazdun and thank you very much for your elaborate response, and your meticulous revision of my code. You were very helpful, since you reminded me things that in the heat of the moment i forgot and you've also shown me approaches that i hadn't think of, and for that i'm very grateful. I'll try my best to keep the things you've shown me in mind and implement them on my next projects.

  Another question that i would like to ask was that from what i've noticed from my approach, your revision and other peoples solutions though, was that the typography sections were always kinda off, and wouldn't resemble the original design. To which i believe (and correct me if im wrong) is kinda impossible to achieve unless you have the pro version for the figma/ sketch info? So should i just focus on getting the general idea of the project together and not focusing too much to make mine a complete look-a-like?

  Once again thank you for your time and helpful comment :)

  PS. I really liked the way your code was written, it was nice and clean :)

  Cheers!

  0

  

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  @Ildrim Glad I could help ! In regards to your question, Yes you are right ! unless you have access to original design, it becomes so annoying to create a pixel perfect solution ! Still you can manage to do it but in my opinion it's really unnecessary, When I open someone else's solution I look into functionality and responsiveness and then the code readability, I've seen people spending so much time on accessibility and that's what I think worth looking into ( as I'm very bad at it myself 😁 ) Creating a pixel perfect solution is not that much of a deal for me but again that's up to you to decide !

  1

  

  Ildrim•50

  @IldrimPosted about 3 years ago

  @Yazdun thank you once again for all the help you've provided me and the time you've spent in doing so!

  I wish you a wonderful day ! ^^

  0
• 

  Kauê Leal de Lima•80

  @kauelima21Posted about 3 years ago

  Great

  0