Submitted over 3 years ago

Profile card component solution with tailwindcss

Sagar Kaurav• 460

@sagarkaurav

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Feedback appreciated!!

Community feedback

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Hey, good work, Sagar Kaurav! 👍

Your solution looks pretty good! 👏

I only suggest,

Keeping the background SVGs from growing smaller when the width of the viewport decreases so that they maintain their size (as in the original design). 😉

Keep coding (and happy coding, too)! 😁

Sagar Kaurav• 460

@sagarkaurav

Posted over 3 years ago

@ApplePieGiraffe Thanks for the feedback. I Have change SVGs to fixed size but I am still having problem making them position correctly.

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

@sagarkaurav

Yes, positioning the background SVGs can be tricky! Try experimenting with positive and negative fixed values (such as rem or px) along with keywords like top, right, etc. or even using vw or vh. 😉

Grace• 27,930

@grace-snow

Posted about 3 years ago

Try to get the small details on this closer to the design if you can. Like the background colors, the background circle positions (I'm viewing on mobile) and the box shadow. Designers wouldnt let designs pass if you didn't match colors they've chosen in particular (when working on a real team). The only exceptions to that are when theres things like color contrast fails for accessibility. Usually designers are very receptive to a change when that happens.

Grace• 27,930

@grace-snow

Posted about 3 years ago

Other things to note are that background patterns or any decorative images that don't add meaning to a page should not have an alt description. They should have empty alt text like alt="" and if they are svgs they also need aria-hidden="true"

Other really really important thing is to not skip heading levels. They need to go in order for document outlines to work. That's essential for assistive tech, and pretty important for search engines too.

Other than these things, all good 👍

Grace• 27,930

@grace-snow

Posted about 3 years ago

Ps the link to this one on your site is wrong at the moment. It takes people to rock paper scissors

Sagar Kaurav• 460

@sagarkaurav

Posted about 3 years ago

@grace-snow Thanks for pointing out. I have updated my blog with proper link.

Please log in to post a comment

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