Submitted over 2 years ago

NFT Card component using VueJS and SCSS

#vue#sass/scss

Sullivan Berger• 20

@SullivanBerger

Preview site View code

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello guys,

I wanted to develop some frontend stuff since I no longer have time for it, with my full time job as a backend developer. I still want to work on some frontend projects in the near future, and I need to sharpen my skills.

Thanks in advance for your feedback !

Community feedback

Remus D. Buhaianu• 3,145

@Miculino

Posted over 2 years ago

Well done on your solution, Sullivan!

I really like how it came out and I had a look through your code and it's well-written and organized. Definitely one of the best solutions I've seen so far for this challenge!

Just a few suggestions I have:

@import will be officially deprecated later this year. It's best practice to use @use instead. I only recently found out about this as well
Try replacing px unit with rem / em or even % / vh / vw depending on the context

Marked as helpful

Sullivan Berger• 20

@SullivanBerger

Posted over 2 years ago

@Remus432 Thank you Buhaianu for your kind words and suggestions, I'll look into it as well !

David Turner• 4,110

@brodiewebdt

Posted over 2 years ago

This looks very good. Spacing, alignment and hover effects all like the design.

Wrap your app div in a Main tag and add lang= "en" to the HTML tag and it will clear the accessibility warnings.

Hope this helps.

Marked as helpful

Sullivan Berger• 20

@SullivanBerger

Posted over 2 years ago

@brodiewebdt Thank you David for your comment, I'm updating the project with your suggestions !

I'm still wondering why the text is a little bit off vertically, it seems like the line height from the figma file and how it is displayed in the browser are different. Weird !

David Turner• 4,110

@brodiewebdt

Posted over 2 years ago

@FFSulli What text is off to you? I looked at it in Chrome, Firefox and Polypane and I didn't notice anything. Maybe I am missing it.

Sullivan Berger• 20

@SullivanBerger

Posted over 2 years ago

@brodiewebdt on the design comparaison we can see that the description paragraph is a bit off and it's impacting everything under, but it's just a few pixels, nothing major. I believe that the line height is calculated differently on Figma and it causes this issue.

David Turner• 4,110

@brodiewebdt

Posted over 2 years ago

@FFSulli I think it looks fine. Don't worry about it. I didn't even notice it.

Marked as helpful

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