Profile Card Component made with React and Styled Components
Design comparison
Solution retrospective
This was my second time doing this challenge. I have redone it using React and Styled Components.
I am pretty happy with the profile card, but please, feel free to give me any tips to improve my code.
Also, the background SVG placements were hard for me and I have no idea how to make it work seamless for mobile and web.
Community feedback
- @jeurysantos1Posted almost 4 years ago
Hey Tati.
I loved Sass as well, and I am glad you used it. I like the organization of your environment (everything on its own on file).
Easy to read= easy to maintaining; Those are hard to accomplish, and you killed it.
Something that I didn't see the design wasn't responsive to a cellphone viewport of the 375px. In the future trying to use more Media queries, so you modify your design to the viewport required.
And How you get to have so much perfect preview ??
1@tatimunizzPosted almost 4 years ago@jeurysantos1 Hi Jeury! Thank you for your kind comment!
I did not approach the mobile view in this challenge. I was afraid of it hahahah But I am researching about it, and how to do it in a good way. Some people have told me that I should approach the mobile view first thing, but for some reason I keep not doing that. I will do it in the next challenge.
About the preview:
I try to stick to the proportion of the design. I do not have the Pro account so, to get close to the sizes and proportions I place the design images (that are exactly the size of the large computer screen size and the mobile screen size) in the Figma. In this way I can trace and reproduce all the elements in the design. Figma is great because it gives css code. So I know the box sizes, the text size, even the line height, which font weight to use and many other aspects. Sure it is not precise as to have all the design documentation in hand, but it is quite close to the original design. And I enjoy the process of retracing the elements and practicing this skill as well.
I hope I answered your question.
Have a good day!
0@jeurysantos1Posted almost 4 years ago@tatimunizz Oh Waoo every day we learned something new. thank you so much for your help I didn't know such a powerful site exists but thank
0 - @ArshKarpoorPosted almost 4 years ago
It is very very very nice!!!!!
1
Please log in to post a comment
Log in with GitHubJoin 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