Social Links page with CSS FLEX COLUMNS

Community feedback

• 

  fortunat81•90

  @fortunat81Posted 2 months ago

  Great work ! totally understand you wanting to make your classes cleaner i would suggest using the (BEM) method (BLOCK->ELEMENT->MODIFIER)

  here is one ressource : https://css-tricks.com/bem-101/

  exemple

  <div class="social-links"> <div class="social-links__header"> <div class="social-links__img-container"> <img class="social-links__img"> </div> <div class="social-links__text-content text-center"> <h2 class="social-links__name"></h2> <p class="social-links__location"></p> <p class="social-links__description"></p> </div> </div>

  Marked as helpful

  1

  ---

  

  Sandaruwan•300

  @Sandaruwan7056Posted 2 months ago

  thanks @fortunat81

  0
• 

  P

  Teodor Jenkler•3,820

  @TedJenklerPosted 2 months ago

  Hi @YourRat-webdev,

  Nice project! Here are a few suggestions:

  I noticed that your component is deeply nested. I recommend using <div>s sparingly to improve readability and SEO. This project can be easily managed with one main container and then a card component using Flexbox in a column layout to achieve the stacking effect you have now. This approach will make your code cleaner, more readable, and reduce the amount of CSS needed. Simplification is often key.

  I also noticed that you are nesting <a> tags within <button> tags. This is not recommended. You should either style an <a> tag as a button if it functions as a link or use a <button> but only for forms or JavaScript actions.

  Keep up the great work!

  Best, Teodor

  0
• 

  Demetrio Julian•580

  @dejuliansrPosted 2 months ago

  I'm still a beginner, you have done your job very well, keep practicing your skills

  0