Social Media Link Table With Flexbox

Solution retrospective
I created it at a speed I was happy with and managed to get to the solution.
What challenges did you encounter, and how did you overcome them?I had to rewrite some code to get the anchor links to work. I had the padding on the li element and not the anchor tag.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Kama-ds10
Great work, j3dd3rs! Your solution is clean, visually appealing, and very close to the original design. Here’s some detailed feedback based on key points:
Semantic HTML You’ve used semantic tags like <main> and <ul>, which is great! One thing to consider is replacing the <p> elements used for the name, location, and tagline with more semantic tags where appropriate—for example:
Use an <h1> or <h2> for the user’s name (.social-media-name).
The tagline could be in a <blockquote> or a styled <p>, depending on the tone you want.
Responsiveness The layout looks solid and centered on larger screens. You may want to test how it behaves on smaller devices or add a media query to ensure the padding and button widths adapt below, say, 375px.
Tip: Instead of fixed padding: 1rem 9rem for your links, consider something more flexible like padding: 1rem 2rem; width: 100%; text-align: center;
Design Accuracy Very faithful to the original Frontend Mentor challenge design. The only noticeable difference is the button sizing on smaller screens. Otherwise, it's clean and on-point.
Suggestions for Improvement Add focus states for accessibility.
Consider using h1/h2 for the main headings instead of p.
Use more flexible padding or widths for buttons to improve responsiveness.
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