Design comparison
Solution retrospective
I am most proud of myself for being able to use HTML and CSS to create a social profile links, this shows that I am gradually learning how to become a better web developer.
Community feedback
- @TedJenklerPosted 2 months ago
Hi @Alheri-blessing,
Nice project! Here are a couple of suggestions to improve it:
Another cool way to center a <div> is by setting the parent to position: relative, the content to position: absolute, and then using top: 50%, left: 50%, with transform: translate(-50%, -50%). This method is quite effective for centering elements.
I noticed that there is some unnecessary nesting in your code. Try to reduce the number of <div>s to keep your code clean and readable for both screen readers and other developers using tools like Chrome DevTools. A better structure would be to center the card using Flexbox on the <body>, and then use <main> with flex-direction: column so that everything stacks naturally. A bit of margin would be sufficient to achieve the desired layout.
Keep up the great work!
Best, Teodor
Marked as helpful0@Alheri-blessingPosted 2 months agoHi @TedJenkler Thanks for your observations and correction, I will keep that in mind and also take note of the corrections.
1 - @fastcheetahPosted 2 months ago
Hey, nice work on your project, it looks really good but I think social section anchor tag will look better if you increase the font-weight by 700 and dont use pixels for font size I like you used transitions on your project makes it look really good. Hope you found this comment helpful : ~ )
Marked as helpful0@Alheri-blessingPosted 2 months agoHi @fastcheetah, Thanks for the observation, I will make the necessary adjustments. Thank you once more.
0 - @SvitlanaSuslenkovaPosted 2 months ago
I see you added flex, but your project didn't align to the center. The problem is you should add to your flex also min-height: 100vh; Currently, the height of the body is the same as the component in it.
Hope you found this comment helpful :)
Marked as helpful0@Alheri-blessingPosted 2 months ago@SvitlanaSuslenkova, thanks for your observation, in the body tag I set min-height to 100vh as you have observed and deleted the padding I added to the work initially.
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