Skip to content
Submitted over 1 year ago

Frontend Mentor - Social links profile using Flex & Grid

John Carruthers•310
@techyjc
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Couldn't sleep so decided to do a Frontend Mentor Challenge.

There are probably far better ways to complete this with less CSS,

Code

Please log in to post a comment

Log in

Community feedback

  • Justin Connell•720
    @justinconnell

    Good use of those sleepless nights!

    Your solution looks great especially given you should have been sleeping.

    Looking at the live preview everything looks good on different screen resolutions.

    Looking at the code:

    • The code is well structured and readable
    • Great use of naming for the CSS classes

    The only suggestion I have in terms of improvements is to try using semantic HTML to markup components - you could view a social card as an ‘article’ that has a ‘header’, some ‘content’ and ‘footer’ section in most cases (expect there's no footer in this design), then the semantic markup could be:

    <article>
  <header>
      /* heading content here */
  </header>
  <section>
      /* main content here */
  </section>
  <footer>
     /* footer content here */
  </footer>
</article>

    Overall I like your 'style'

    I hope you find this useful, keep on coding, but get some sleep sometime ;) !

    Marked as helpful
  • John Carruthers•310
    @techyjc

    Updated the design with the suggested changes.

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