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

HTML5, CSS3

P
AK 6,700

@skyv26

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


Please help me by giving me your valuable feedback. I am learning web development and while completing this challenge, I was really confused between using Flex and grid. I want to know, is it really important that the design must be similar to the preview image of challenge ?

Thank You Aakash Verma

Community feedback

hardy 3,660

@hardy333

Posted

Hi Aakash.

I have some suggestions for you:

  1. Give profile image same width and height value in order it to have perfect circular shape rather then oval shape. Also in that case use property object-fit: cover; on img which forces image to cover it's height and width and prevents it from stretching.
  2. use more white space -- padding and margins.

Other then that everything looks good -- nice job.

Your questions :

  1. In this case using flexbox is fine and good choice, css grid is not needed here - it is very simple layout and that's way. In general use flexbox for more simple and one dimensional - horizontal or vertical layouts, use css grid for complex two dimensional grid layouts .

  2. yes it is important, but you can change different things if you want It will not be big deal xD But usually try to match your website to your design as much as possible because design always looks good - It is done buy pro designer, you are developer, your job is to make it as a website.

Marked as helpful

4

P
AK 6,700

@skyv26

Posted

@hardy333 Thank you so much. Slowly but definitely I will improve myself.

1
hardy 3,660

@hardy333

Posted

@skyv26 good luck to your coding journey...

Marked as helpful

2

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