Skip to content
Submitted 7 months ago

Social Links

Sepehr•70
@SepehrShapouri
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?

well this one was a simple one,clean code base,structured architecture and complying with the BEM convention, are the things I am proud of in this project.

What challenges did you encounter, and how did you overcome them?

I didnt really encounter any problems or challenges, however, I use font variables for the first time, so getting the hand of was a bit, challenging I would say.

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

A review over my styling,the way I use css properties and the way I structure my html elements on the DOM would be highly appreciated.

Community feedback

  • pablodev•430
    @PabloodevPosted 7 months ago

    It's perfect, I looked at the repository and it's well organized! Speaking of the visual aspect, I thought it was very similar, maybe I would just reduce the "width" size of the link squares a little.

    congratulations

    Marked as helpful
    0
    Sepehr•70
    @SepehrShapouriPosted 7 months ago

    @Pabloodev Appreciate the comment! Will definitely do!

    0
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    MAKING ACCESSIBLE LINKS:

    • The links like Github, Frontend Mentor are needed to be actual <a> elements.
    • This is the current markup,
    <ul>
     <li class="social-link">GitHub</li>
     <li class="social-link">Frontend Mentor</li>
     .....
</ul>
    • In order to make this solution accessible, we need to use <a> elements with href attribute. Here's the example
    <ul>
     <li>
         <a href="#" class="social-link">GitHub</a>
     </li>
     <li>
          <a href="#" class="social-link">Frontend Mentor</a>
     </li>
     .....
</ul>
    • In the above example, we wrapped the links with actual a elements. We moved the class social-link from li to a because after refactoring the code with a we need to style them instead of li elements.
    • If you have any questions or need further clarification feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    0
    Sepehr•70
    @SepehrShapouriPosted 7 months ago

    @0xabdulkhalid Thank you for considering reviewing my solution,I appreciate the feedback and will definitely apply them to my code.

    0
    Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 7 months ago

    @SepehrShapouri Glad you found it helpful ! 🤠

    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