Skip to content
Submitted 3 months ago

Social Links Profile Challenge using HTML5, CSS Grid & Flexbox

Sunay Dagar•100
@suzzy-dszy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

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
    @123MikolajPosted 3 months 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
    1
    Sunay Dagar•100
    @suzzy-dszyPosted 3 months 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 :)

    0
  • Rgeb1•110
    @Rgeb1Posted 3 months 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
    1
    Sunay Dagar•100
    @suzzy-dszyPosted 3 months 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 :)

    0

Please log in to post a comment

Log in with GitHub

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