Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Link component using CSS Flex

@Hamptooon

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@M-Mikos

Posted

Hi! Thank for your solution, let me share some tips :

  • Semantic HTML: Since buttons are similar, repetitive elements next to each other, you could consider tagging them in <li> tag, wrapped in <ul> parent element.
  • Sass file structure: You may be interested in implementing elements of the 7-1 pattern in your project, in order to more clearly structure your .scss files (https://sass-guidelin.es/#chapter-architecture)
  • Units: Using REM units to specify all dimensions (except very small dimensions such as border-width: 1px) is considered a good practice because of the ease of implementing responsiveness. With REM units, all you need to do is change the font-size value of the root element (html element), and all dimensions dependent on these units will automatically scale. (https://www.freecodecamp.org/news/css-units-when-to-use-each-one/)

Good luck in your future work!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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