Skip to content
Submitted 8 months ago

Responsive Social Links Profile using React

react
Atiyeh•40
@AtiyehMahdizadeh
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Before modifying the code, to valuing elements, I had used more fixed units, but after reading and reviewing the comments I received, I tried to use fewer fixed units for value setting so as not to run into problems making the project responsive.

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

I had a problem with making this project responsive, so after sharing my solution, I modified the project by reading and reviewing the comments I received. Now I have posted my modified code here.

I am very grateful to friends who helped me with their comments.

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

If there is still something that needs to be improved, please let me know with your comments.

Thank you 🙏

Code

Please log in to post a comment

Log in

Community feedback

  • Chamu•13,860
    @ChamuMutezva

    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
  • Chirag•490
    @chirag-bishnoi

    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
  • Bassel || باسل•520
    @Basselfathy

    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

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