Design comparison
Solution retrospective
...made with a lot of love 🤘🏻🙂
Community feedback
- @a1excpunkPosted 10 months ago
Great job, I have one little piece of advice, and because you are keen on details, I think you'll like it :) About list item disc styling, you can change colour, size etc. by using ::marker pseudo-element on the li tag.
Marked as helpful10 - @BitWizCoderPosted 10 months ago
Hello Cheosphere, this design looks pretty cool. I've one question, how do you get the spacing 100% right? as i do from the design images it always doesn't match the spacing properly as i guess the spacing.
thanks.
10@CheospherePosted 10 months agoHello @mhmdNoman, I have some knowledge of graphic design, what I do is carefully examine the "desktop-design.jpg" file, using photoshop or illustrator, so I can measure the sizes, margins and padding of each element, and apply it to my development to achieve a result almost identical to the UI design that they give us in the project files folder. It's a bit stressful and time-consuming work, but I like seeing the end result.
18@BitWizCoderPosted 10 months ago@Cheosphere thank you for explaining. it seems little time consuming also boring. as i cant spend much time on these projects, for now i'll stick to my guesses.
1@lindseydortchPosted 10 months ago@mhmdNoman have you tried going into the Figma design and selecting a box and holding down option and going to another box? It will show you the distance.
2@BitWizCoderPosted 10 months ago@lindseydortch Hello Lindsey, thank you for the suggestion. but sadly i don't have the premium subscription for accessing the Figma files. i thought of getting the subscription but from my part of the world it is little bit tricky to do international payment.
1@beqarionPosted 10 months ago@Cheosphere Youre making very good job! So, do you mean by examining the 'desktop-design.jpg', that you don't use even figma file? 🤯🤯🤯. And yes the end result is very effective indeed 👍
3@TheLius1Posted 8 months ago@BitWizCoder same here i wonder how he gets those things right the positionings, margins, padding etc damn....
0@ha308ingPosted 7 months ago@Cheosphere your work is incredible! 👏👏
I thought it's impossible to achieve that level of perfection and hoped it's kind of image distortion.
So I pick photoshop and start throwing grids and lines =)
Could you recommend any resources to master this technique?
How do you handle font paramaters like
letter-spacingandline-height?I tried to replicate text with PS Type tool, and match the design file, but still have inconsistencies: screenshot
0 - @Amit-R328Posted 7 months ago
Amazing work! actually pixel perfect. Thanks a lot for the like, it's an honor to get it from someone as talented as you
1 - @Josep-OcanaPosted 7 months ago
Impressive! I love your design... It's perfect!
Next time I'll try to do the same with photoshop because I have the same problem that Muhammad with the sizes.
1 - @sniper23403Posted 7 months ago
i was impressed by ur work and i got an experience in PS and Ai , i calculate mostly everything but when the design came i can say he was 90% like the challenge , i need u to give some advices how i can improve myself to achieve that 100%, keep grinding bro ur the bestt
1 - @animelord0Posted 8 months ago
hey, bro i just want to say .. this looks amazing , and i appreciate the likes u give my solutions, i know it doesn't look like much but they really help motivate me .
1 - @chahidsalmiPosted 8 months ago
Just WOW, Amazing Job Bro. just a question, how did you color the numbers of the instructions list ?
1 - @BKFOEPosted 9 months ago
Love your design precision. You have been a great contributor to my style as I often look at your code to compare my sizing. Keep doing what you're doing. Thanks!
1 - @Scott1UPPosted 9 months ago
Beautifully accurate work!
As a Product Designer by day, this makes me smile :)
1 - @germanp007Posted 10 months ago
He visto varios de tus challenge, y todo te queda perfect pixel 🤯🤯🤯
1 - @ledoux25Posted 10 months ago
Bro you are freaking insane been honest i feel a little jalous and i want to achieve such perfect results as yours and trust me i will achieve it and also i we could link up so u teach me some trick i'd be glad( ´･･)ﾉ(._.`)
1 - @SaviourjrPosted 6 months ago
Nice!!!!! Brooooo!!
can i get a Follow back?
0 - @RedenedPosted 7 months ago
If you don't mind, could you give me a detailed explanation or step-by-step of how you take the final screenshot for the solution ?
Thank you in advance.
Cheers.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord