Submitted about 1 month ago

Social Links Profile Challenge using HTML5, CSS Grid & Flexbox

Sunay Dagar• 70

@suzzy-dszy

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I enjoyed working on this particular challenge and being able to implement what i learnt from previous challenges such as box-shadow as well as trying out the capabilities of the pseudo element :hover and implimenting gradient hover effects 🚀 I also opted to use CSS Grid instead of flexbox for the links as I just learnt CSS Grid very recently and wanted to gain a better understanding of it hands on which proved useful despite its challenges. 🔥

What specific areas of your project would you like help with?

None in particular but any help / feedback would be greatly appreciated. 👍

Community feedback

Mikolaj Solecki• 50

@123Mikolaj

Posted about 1 month ago

The solution uses semantic HTML elements like <main>, <h1>, <h2>, and <footer>, which is good for accessibility and SEO. Includes alt text for images. The layout is responsive and adapts to different screen sizes.

I'm not a fan of the scrollbar on the right and would personally change the font - it doesn't look like the font in your screenshot. Overall I think that the solution is well-implemented with semantic HTML, responsive design, and clean CSS. Good job!

Marked as helpful

Sunay Dagar• 70

@suzzy-dszy

Posted about 1 month ago

@123Mikolaj Thank you for the feedback, as for the font i just used the 'Inter' font that was provided, but maybe because i didn't set any font weights it must look odd. I'll look into how to remove the scrollbar as it is something I've not tried out yet. Thank you :)

Rgeb1• 110

@Rgeb1

Posted about 1 month ago

Your project looks great! I love how you personalized it, nice touch! The layout is well-organized, and it's responsive, which is awesome.

Something to consider would be to use a separate stylesheet for the CSS rather than putting it in the <head> of the HTML file. It'll be good practice to keep these files separate. Overall, you’ve done a fab job!

Marked as helpful

Sunay Dagar• 70

@suzzy-dszy

Posted about 1 month ago

@Rgeb1 Moving forward I will use a stylesheet, the style element was there by default and so I thought we had to use it as it is, otherwise thank you so much for the feedback :)

Please log in to post a comment

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