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.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @TedJenkler
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 helpful - @fastcheetah
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 helpful - @SvitlanaSuslenkova
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 helpful
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