Responsive Social Links Profile using React

Community feedback

• 

  T

  Chamu•13,340

  @ChamuMutezvaPosted 21 days ago

  Hi Atiyeh

  Here are some of my opinions after going through your work:

  • key elements of a website includes landmark and semantic elements. By landmark elements I mean elements such as header , main , footer etc. They are important for the organisation and structure of a website. Semantic elements includes the landmark elements and more and refers to using elements that have been designed for a specific task.The heading elements (h1 - h6) should be used as heading elements of course. The anchor (a) are meant to be links for navigation purposes . In this challenge ,the social_networks_items should therefore be treated as links to the related social networks. Using semantic elements will make your site accessible to many users. Try navigating with your keyboard only and see that none of the social_network_items will be focused.
  • the alt value for an image should avoid using words such as picture, image , icon etc as those words are keywords that will be used by assistive technology when an image has been encountered. The alt value should provide a message related to the content potrayed by the image. Decorative images can just have an empty value.
  • use a modern css reset stylesheet to normalise your styles - it is a must in an website that you create
  • do not use id for styling , they have a higher specificity. Use mostly classes where possible.
  • use mobile first when styling , your first styles should cater for mobile/small devices and then when they is reason to add media query ,do so using the min-width and only change the styles that you wish to. This challenge does not need a media query
  • the social-card should have a max-width: 24rem and a width: 100% . So on small device the card content will fill the device width but other devices the width will not exceed 24rem. Leave some margins on small devices if you use width: 100%

  Marked as helpful

  0

  ---

  

  Atiyeh•20

  @AtiyehMahdizadehPosted 20 days ago

  Hi @ChamuMutezva,

  Thank you so much for taking the time to share your detailed feedback! I truly appreciate the effort you’ve put into analyzing my work and providing such insightful suggestions. Your points about using semantic and landmark elements for accessibility are spot-on. I’ll definitely review the structure of my project to incorporate them better, especially for elements like header, main, and footer. I also understand now why the alt value for images should avoid generic words and how they can improve accessibility—thank you for pointing that out! Regarding CSS, the idea of using a modern reset stylesheet and mobile-first design is something I’ll start implementing in future projects. Your explanation of how to approach max-width and width for responsive design on the social cards is very clear, and I’ll try out your suggestions. Lastly, the advice about avoiding IDs for styling and sticking to classes makes perfect sense, especially to maintain flexibility in styling. I’ll ensure I apply this principle moving forward. Once again, I’m grateful for your constructive feedback—it’s incredibly helpful and will definitely guide me in improving this project and future ones!

  0
• 

  Chirag•430

  @chirag-bishnoiPosted 21 days ago

  We should never use % for sizing our elements. They are only good for margins and padding. You have given your .social_card{width:35%} and this line is causing all the trouble. Instead you can either give your social card a fixed width in rem or px but to make to responsive use "max-width" property .social_card{max-width:350px} or you can remove this line entirely and let the inner content decide the width like I did in my project.

  Marked as helpful

  0

  ---

  

  Atiyeh•20

  @AtiyehMahdizadehPosted 20 days ago

  Hi @chirag-bishnoi,

  Thank you for your detailed feedback! I understand your point about avoiding % for element sizing and the potential issues it can cause. Your explanation and alternative solutions are really helpful, especially the use of max-width for responsiveness. I'll revisit my code and experiment with these approaches to see how they improve the layout. I appreciate you taking the time to guide me on this!

  1
• 

  P

  Bassel || باسل•540

  @BasselfathyPosted 21 days ago

  Hi @Atiyeh.

  You can take a look at my solution and have some insights from Here

  In addition, I recommend you to read about clamp() in css; it will help you with the the dynamic font sizing instead of media queries.

  Marked as helpful

  0

  ---

  

  Atiyeh•20

  @AtiyehMahdizadehPosted 20 days ago

  Hi @Basselfathy, Thank you for taking the time to share your solution with me! I’ll definitely take a look and see what insights I can gain from it. Also, I really appreciate the tip about clamp() in CSS—it’s a feature I’ve been meaning to explore, and your suggestion is a great motivation to dive into it. Thanks again for your feedback!

  1