Submitted about 1 month ago

Social Links Profile

chilldeleuze•80

@chilldeleuze

Preview site View code

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 experimented with a few css features I haven't used before, like variables, which was fun and made the css much more understandable.

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

I had some issues with flexbox, like making sure the elements in the top of the card (picture, title, ...) centered while the links at the bottom half had to be stretched. I first wanted to solve this by wrapping everything in the top half in another div, but then I resorted to using align-self: center. I don't know which one would be better practice.

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

I can't really say why, but using align-self: center felt like a hack in this use case and I wonder if there was a more elegant solution.

Community feedback

Adriano•38,310

@AdrianoEscarabotePosted about 1 month ago

Hi chilldeleuze, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

Using only div elements, as in the code below, reduces the semantic meaning of the content, which can negatively impact accessibility and SEO. Replacing generic div tags with more meaningful HTML elements improves clarity for screen readers and search engines.

Improved code with semantic tags:

<section class="profile__container">
  <img class="profile__picture" src="./assets/images/avatar-jessica.jpeg" alt="Jessica Randall">
  <h2 class="profile__name">Jessica Randall</h2>
  <p class="profile__location">London, United Kingdom</p>
  <blockquote class="profile__short-bio">"Front-end developer and avid reader."</blockquote>
  <nav class="social-links__container">
    <a class="social-link__button" href="#">GitHub</a>
    <a class="social-link__button" href="#">Frontend Mentor</a>
    <a class="social-link__button" href="#">LinkedIn</a>
    <a class="social-link__button" href="#">Twitter</a>
    <a class="social-link__button" href="#">Instagram</a>
  </nav>
</section>

The rest is fantastic.

Hopefully, you'll find it helpful. 👍

Gobinath•140
@gopinath-97Posted about 1 month ago
Hi coder, you can try with grid to center the items on whole as well as inside, it's super easy than flex and I'm using that more now for projects like this, hope this willl be helpful on your upcoming codes.😊
0

Please log in to post a comment

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