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

Simple Responsive Profile Card with HTML CSS

@ameyadeokule

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 used "calc" to calculate the width of the profile card dynamically, is it a good practice?? or any other newer method available to do the same? and any feedback will be appreciated. Thank you for your valuable time!

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hi, Ameya Deokule! 👋

Well done on this challenge! 👍

I think for this challenge, giving the card component a simple fixed width and letting its height be determined by its content will work well. The clamp and calc functions are definitely useful at times, but I don't think they are necessary in this case since no complex calculations need to be made for the dimensions of the card. 😉

Also, I suggest considering using CSS background images to add and position the background images in this challenge. It'll keep those images out of your HTML, which will make your markup slightly cleaner, and I think it's easier to manage the images and CSS background images, then (since you won't have to worry about things like the images overflowing their container). You could try to use viewport units to position the background images in this challenge, too, (which will allow you to make it so that they do not move around so much when the size of the screen changes).

Hope that helps. 🙂

Keep coding (and happy coding, too)! 😁

1

@ameyadeokule

Posted

@ApplePieGiraffe Thanks I'll surely remember to implement these changes in my design. Thanks for taking the time to review my code.

1
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

@ameyadeokule

No problem! 👍

Oh, and BTW, if you found these tips helpful, an upvote would be appreciated! ;)

1

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