Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social links profile using Semantic HTML5,CSS custom properties

#accessibility

@oge-dev

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I need a review, and any feedback would be highly appreciated.

Community feedback

@emjayruka

Posted

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 helpful

0

@oge-dev

Posted

@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

@emjayruka

Posted

Hey @julietoge, this video should be of help https://youtu.be/DBrFv02bSsI?si=EwtMyDHoRIPAwGoo

Marked as helpful

0
Daniel šŸ›øā€¢ 41,760

@danielmrz-dev

Posted

Hello @julietoge!

Your project looks great!

I have one suggestion for you to improve it even more:

  • Using margin or padding 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 helpful

0

@oge-dev

Posted

@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
azgpapiā€¢ 90

@azgpapi

Posted

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-dev

Posted

@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 GitHub
Discord logo

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