Skip to content
Submitted 2 months ago

My version of the challenge proposal by Frontendmentor about creating

Antonio Prada González•50
@apradaglez
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?

Day after day I'm learning how to develop a website more efficiently with community help and professional tools like Figma and Git Hub. I will try to simplify more the code and make it more reusable.

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

Without Figma files, I had to look for the sizes to adjust the design more accurately than possible.

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

at the start, centering the module, things so simple things like putting width in the parent div.

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted 2 months ago

    Hello again, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

    • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.
          <section class="social-links-profile__rrss">

        <div class="social-links-profile__btn">

          <p class="social-links-profile__p">GitHub</p>
        
        </div>

        <div class="social-links-profile__btn">

          <p class="social-links-profile__p">Frontend Mentor</p>
        
        </div>

        <div class="social-links-profile__btn">

          <p class="social-links-profile__p">LinkedIn</p>
        
        </div>

        <div class="social-links-profile__btn">

          <p class="social-links-profile__p">Twitter</p>
        
        </div>

        <div class="social-links-profile__btn">

          <p class="social-links-profile__p">Instagram</p>
        
        </div>

      </section>

    Like this..

     <ul>
      <li><a>GitHub</a></li>
      <li><a>Frontend Mentor</a></li>
      <li><a>LinkedIn</a></li>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
    </ul>

    I hope you found this advice helpful! Keep up the great work, You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    Marked as helpful
    0
    Antonio Prada González•50
    @apradaglezPosted 2 months ago

    @Stroudy thanks for following my progress, I’m happy to have your support. I will implement your advices. Thanks again.

    1
    Steven Stroud•11,910
    @StroudyPosted 2 months ago

    Hey @apradaglez, No problem, You got this! You did great! Lets go!💪

    0
  • João Nodari•30
    @JoaoNodariPosted 2 months ago

    Muito bom, gostei de fazer o desafio.

    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