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

NFT preview card

Mario 180

@bembem33

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi! My second solo HTML/CSS project. :D If somebody has a good tutorial on "how to think" (not how to do it) while making a responsive page, please let me know, because for now"@media queries" are the main problem for me.

Community feedback

NicolasBQ 190

@NicolasBQ

Posted

Hey @bembem33, congrats on completing the challenge, it looks great!

I recommend you this free course, it was really helpful for me: https://courses.kevinpowell.co/conquering-responsive-layouts

This guy has also more content about responsive design and media queries in his Youtube channel.

I hope this information is useful for you!

Marked as helpful

0
Web Wizard 5,690

@rsrclab

Posted

Hi, @bembem33 ~

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.

  1. There is no hover effect on image - and that's one of the challenging part here.
  2. Try transition on hover effects, and that will make your work more beautiful.
  3. I suggest you to try BEM for classing elements.
  4. You can add max-width to card for responsiveness.

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 ~

Marked as helpful

0

Mario 180

@bembem33

Posted

Hi @tymren608 ,

I just added hover effect and transition on the image, also I set the max-width of the card element. In the future, I will definitely try to get more familiar with "BEM classifying". But still a lot of things to learn.

Thank you.

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