@Yazdun
Posted
Hello Ildrim and congrats on finishing this challenge 👏! Here are my suggestions:
- There is way too much usage of
marginandpaddingin your css ! for texts you can usetext-align:centerandtext-align:leftand you don't need anymarginon them. - Give
border-radius:10pxandoverflow:hiddento the parent element instead of givingborder-radiusto children separately. - Instead of giving
marginto children, give apaddingto 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 thenmax-width:...pxso your design won't break on smaller screens. - There is no need for
p-divyou can stylepitself 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
@Ildrim
Posted
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!
@Yazdun
Posted
@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 !
@Ildrim
Posted
@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 ! ^^
