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

Pofile Pane

@Temi-Michael

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Darshan 210

@its-subhash

Posted

Hey @Temi-Michael , I saw your code and i have some suggestions.

In HTML: 1.Removing Default styling from frontend mentor is a good idea.

2.Creating own grid and using custom gap will give you more control over structure.

3.I personally think that using anchor tag insted of button is a good idea, since you have to add links for those social media accounts.

In CSS:

1.In .profile-img, setting border radius to half of the length or width of image will work completely fine for making in circle, you can adjust few pixels if it won't work, but using 9999px is out of the world.

2.You can put only one dimention of picture either it's width or it's height and other will get fit automatically without breaking it's ratio.

3.It will be nice to put repetating things at one place like font-family, you can either make variables or put constant properties in body selector.

4.I won't recommend using bold or other random font-weights, sticking with what's given in style guide is a good practice.

** Adding transition to button color was a nice idea.

Responsive: Am not sure how it's working but those are some unexpected behaviour, it might be because of using Bootstrap, you should consider using at it once.

Hope you liked my suggestions.

Marked as helpful

0

@Temi-Michael

Posted

HTML I don't quite understand the first and second review so i'd probably skip🙄 For the third one, i am still trying to add links to the buttons but Bootstrap is really making the buttons come out in a weird way i also can not explain🤣 so i am working on using JavaScript to add the links.

CSS

  1. Using Border radius 9999px is a Tailwind CSS property to make a circle or rather a rounded object.
  2. So i tried removing the height and it worked, thanks learnt something new😁
  3. I am still working with :root in CSS, so i could also use it for colors for now and would work with px soon.
  4. I was trying to get to use the font weight provided but it was looking somehow to me😭, i have fixed that now tho, Thanks man.

All suggestions are reviews which are accepted,Thanks for it. @its-subhash

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