Social links profile using Semantic HTML5,CSS custom properties
Design comparison
Solution retrospective
I need a review, and any feedback would be highly appreciated.
Community feedback
- @emjayrukaPosted 9 months ago
Hey @julietoge,
Your solution is commendable, even excellent.
In the event that you do not possess the Figma design files, I would like to suggest utilizing a browser extension named Perfect Pixel.
This extension enables you to conduct precise comparisons between your completed project and the design images provided upon downloading the project, facilitating accurate dimension verification. Its functionality can prove invaluable in your future projects.
I hope you found this helpful
Keep up the excellent work!
Marked as helpful0@oge-devPosted 9 months ago@emjayruka, I have already installed the browser extension named Perfect Pixel, but I don't know how to use it. Could you please recommend any resources for me so that I will know how to go about it?
0@emjayrukaPosted 9 months agoHey @julietoge, this video should be of help https://youtu.be/DBrFv02bSsI?si=EwtMyDHoRIPAwGoo
Marked as helpful0 - @danielmrz-devPosted 9 months ago
Hello @julietoge!
Your project looks great!
I have one suggestion for you to improve it even more:
- Using
margin
orpadding
is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:
š Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; /* it works with grid too */ justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
Marked as helpful0@oge-devPosted 9 months ago@danielmrz-dev, thank you for this. It's really helpful. I wanted to apply this to the body, but it wasn't working because if the design exceeded 100vh, it would be cut off. So, I used margin instead. However, I've identified where my mistake came from. I coded height: 100vh; instead of min-height: 100vh;.
1 - Using
- @azgpapiPosted 9 months ago
no feedback needed, it is good what advice i can assist you is you can align the ending and starting part of your name and address start equally and end equally, you can just work with their font-size property. The rest is amazing.
0@oge-devPosted 9 months ago@azgpapi, thank you for your feedback. I truly appreciate it. However, based on the provided design, the font size for 'THE NAME' and 'THE ADDRESS' is not consistent. While the default font size is set at 14px, the font size of the name appears larger than 14px. Moreover, they are not equally aligned at the start and end. Could you please review the design again? or maybe i didn't get you
0
Please log in to post a comment
Log in with GitHubJoin 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