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

Aarthy 70

@Theera12

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


Your feedback will be helpful..

Community feedback

@jgengo-alt

Posted

Hello my dear friend ;)

First of all, good job on doing and submitting your project. Also, good job for asking feedbacks, that how you will get to learn ;)

I think you already noticed the difference between your solution and the one expected.

Frontend, to me, it's a bit like drawing, it's all about proportion, for example "London" is way too small and almost not visible if you compare to the hr right under which seems too present, for what it is.

Also you should always try to ask yourself "what are the important information here ?" and "what are the elements here to bring more visibility to the firsts ?"

For example in this exercise what is very important is the name, the city, and the stats.

Still, those exercises ask you to copy a front, I like to believe we should be more critical and do what we think is best :D If you want to try to copy as much as possible their preview, you can use the chrome extension called " Pixel Perfect " I let you google it but it can help you with your proportion issues.

For your code visibility, don't hesitate to use properly indention, if you are lazy as I am you can use some extension on your editor for example in VSCode there is an extension called "Beautify"

I love that you use flex, if you are interested you should also take a look at html grid :)

Overall, it's good! keep going!

Marked as helpful

0

Aarthy 70

@Theera12

Posted

@jgengo-alt Thanks for the constructive feedback.. will try out next challenges with grid..

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