NFT Preview Card

Community feedback

• 

  Shaurya Gautam•100

  @SGautam1108Posted almost 3 years ago

  I suggest going to chrome developer settings and go to responsive mode, and set width to 1440 for laptop and 375 for mobile. Then keep the design provided side by side with your attempt. You will clearly notice what differences are there!! All the best!

  2
• 

  Clément Creusat•1,655

  @ccreusatPosted almost 3 years ago

  Hello ! Nice job, close to the design ! You got it right, the card is 350 pixel width.

  If you don't have access to the design files (figma/sketch), you could screenshot your solution and paste it in a design tool above the design file included in the starter zip (ex: figma is free). Then use the mix-blend-mode in figma to adjust and find the differences.

  • You have some in the font sizes of the element.
  • You should have an hover icon above the image
  • You should have hover link for the title and the creator link.

  If you have questions, reply ;) Enjoy!

  0

  ---

  

  TJohnsey•70

  @tjohnseyPosted almost 3 years ago

  @ccreusat do the Figma designs have the element sizes labeled, or is it still eyeballing it from there?

  0

  

  Clément Creusat•1,655

  @ccreusatPosted almost 3 years ago

  @tjohnsey With pro account, you can download figma's design. From there, you can inspect all designs (desktop, mobile, states, hovers, ...). If not, you did a good job without !

  0
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @tjohnsey ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • On smaller devices, card goes over screen, and I think max-width: 100% can solve this issue.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.
  • There is no hover effects on image and other elements. It's also one of challenging part here.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  0

  ---

  

  TJohnsey•70

  @tjohnseyPosted almost 3 years ago

  @tymren608 I have not heard of BEM yet but will look into that more. Thanks for pointing out the hover effect as well. I will get that updated.

  0
• 

  Aditya Singh•460

  @adityas24Posted almost 3 years ago

  Hey Johnsey great effort!

  There is not any specific size of the card. All you have to do is look at the design and get your card looking as close to the design as possible.

  Hope it helps. All the best 🙂👍

  0

  ---

  

  Clément Creusat•1,655

  @ccreusatPosted almost 3 years ago

  @adityasingh84 Indeed, he could develop without any size and having a full fluid card but in the design, you have a "max-width" of 350px to attempt this challenge. So this is specific to get the result as closed to the design :)

  0

  

  Aditya Singh•460

  @adityas24Posted almost 3 years ago

  @ccreusat So i should have said there is not any specific size of the card until you have pro membership 😁. If we have the design files then things get lot simpler. You are lucky to have it.

  1

  

  Clément Creusat•1,655

  @ccreusatPosted almost 3 years ago

  @adityasingh84 :-)

  0