Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Socials Links Profile page

@ZionCodes1

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What do you think Guys Looking forward to your feedbacks And i have some questions to ask if anyone wants to answer thank you.

Community feedback

@Iamparves

Posted

Overall, your solution is good. However, there are some points I would like to mention for improvement.

First, you should not use button tags for links; instead, use a (anchor) tags. Additionally, it is not always necessary to wrap elements in an extra div as you did with the name, location, and description; they could have been placed in a single div.

Always strive to avoid using fixed width/height for elements like you did with the link items. Try to use relative units or the max-width, min-width, max-height, min-height properties.

I also noticed that you used a grid in the links div. But you gave a column width of 100px and used padding-right of 215px to center the link items, which is definitely not a good approach. Instead, use grid-template-columns: 1fr for a single column and then use justify-items: center to center the links.

That's all I could notice. Feel free to ask me anything; I will try to answer if I know.

0

@ZionCodes1

Posted

@Iamparves Ok thank you so much for the review I really appreciate it and as I am a new developer Is max-width the same as width or are they different And can the max-width be used the same way as width e.g. max-width: 300px And I really need a mentor thanks if you could help me with that

0

@Iamparves

Posted

@ZionCodes1

max-width is related to width but not exactly the same. It's like saying that an element can be as wide as it needs to be, as long as it's less than 300px.

To learn more you can check out this page from W3Schools: https://www.w3schools.com/cssref/pr_dim_max-width.php

0

@ZionCodes1

Posted

@Iamparves Ok Thank You

0

@ZionCodes1

Posted

@Iamparves I also want to know how to use the @media screen to make my website more responsive with both laptop website view and mobile website view

0

@ZionCodes1

Posted

@Iamparves I also want to know how to use the @media screen to make my website more responsive with both laptop website view and mobile website view

0

@Iamparves

Posted

@ZionCodes1

I think it would be a little hard to explain this in the text.

You can read some articles or watch videos on CSS Media Query. If you are unsure of which resources would be suitable, please let me know and I will try to suggest some resources.

1

@ZionCodes1

Posted

@Iamparves Ok, pls suggest some resources. Thank you.

0

@ZionCodes1

Posted

@Iamparves Thank You so much. I appreciate it

0

Please log in to post a comment

Log in with GitHub
Discord logo

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