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

Profile card component

Darsh 10

@DarshBhanushali

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have just stated with web design, so any suggestion or feedback is valuable to me.

My background image is going out of the main body and it does not look good. and I could not figure our how to do it? If you can hep out that would be great;

Community feedback

T
Grace 30,770

@grace-snow

Posted

Hi there, This is really hard for me to see as I'm on mobile and it's not responsive yet. So next step is to learn media queries ☺

I would never recommend positioning things using margin and padding only. Maybe margin-left and - right auto for horizontal centering but that's all really. If you make a wrapper component be min-height 100vh, give it a little padding like 1rem, and make it a flex container (display flex, align-items center, justify-content center) your card would always stay central on the screen.

So maybe flexbox is the next thing to learn

1

T
Grace 30,770

@grace-snow

Posted

One change I think you need in the html is to put each of those stats in one html element. It doesn't make sense having a title (heading) that just says "80K" for example.

If you had each stat in one paragraph (or list item) , you could nest spans inside that wrap around the number and the label text separately with classes on those spans to control their appearance

1
T
Grace 30,770

@grace-snow

Posted

Ps. I'm going to do this challenge soon and will share how to do the bg images on slack then, so don't worry about that for now and keep an eye out

1
Darsh 10

@DarshBhanushali

Posted

@grace-snow Thank you so much 😊. I am looking forward for your solution and definitely look into your suggestions.

0
Tiass 295

@Tiasstiass

Posted

Good job 👍 few things i’ve noticed:

  • Try using margin and padding instead of position to place elements.
  • A good practice is to use em and rem instead of pixels for sizes.
  • Also look for media queries to make you website responsive to different screen sizes since one design cannot apply to all of them

Keep up the good work! 💪

1

Darsh 10

@DarshBhanushali

Posted

@Tiasstiass Thank you for your suggestions😊. I will surely look into 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