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 component solution

Jack Sheltonā€¢ 210

@thejackshelton

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


This is my first ever project, and I can tell that I made a decent amount of mistakes. How do I get the image to display the icon with the background changed at the same time?

I also had a lot of trouble getting some parts of the card inline with each other. Is there a better way to go at it then the way I implemented?

I started my web development journey a week and a half ago, and would love some feedback on how to avoid redundancy in my code, make it easier, and some alternative ways I could've gone at it.

Community feedback

AgilitiesZā€¢ 280

@phichayut-pak

Posted

Hi! I would say it's a great start for you! But first of all, congratulations on your project! šŸŽ‰šŸŽ‰ Here are the things I would suggest :

  1. For your question, I fixed it by playing with opacity on hover. You might wanna try that out, or another way is to use group and group-hover from TailwindCSS ( it's a css framework that pretty much makes our styling quicker and easier )

  2. You might be using padding without noticing that the overflow on x axis appears. Take a deep look on this, it'll affect a lot when you're working with different designs.

  3. Font size and Font weight matter! You can choose whether you want to fix on this one, it's just for more detail.

Keep studying and practicing! šŸ”„šŸ”„

Marked as helpful

1

Jack Sheltonā€¢ 210

@thejackshelton

Posted

@phichayut-pak thanks so much for the insight! I will continue practicing haha.

  1. yeah I understood the commands on how to add it, I just didn't know how to implement it. I tried having the icon and the image of the same class with hover but it didn't work, and I spent longer than I should've figuring out how to get the icon and opacity to display once hovered. Ended up removing it all.

  2. As in there was more padding to one side than the other? I'm very new to all of these commands and there were definitely some parts I didn't know how to position them exactly without it being a bit off centered. I used the position command a lot. Would this have been solved better with grid or a different command?

  3. I'd love to correct the font-size and font-weight, I didn't see much of it in the read me file. Is there a place where we can see the solution other than a picture?

Thank you so much for the feedback! This is so fun and I love it.

0

@gcapistrano

Posted

Hi, @thejackshelton! Great start! I'm also a beginner, but I'd like to suggest a way to display challenges that I had used. I displayed challenges sorting by easier first and filtering, in my case, by checking free, newbie, and HTML & CSS options. There are ten of them by now. I intend to go through each one, easiest to hardest. Maybe you had already made this procedure, but it could be useful anyway. Keep coding!

Marked as helpful

0

Jack Sheltonā€¢ 210

@thejackshelton

Posted

@gcapistrano I haven't! Thanks for letting me know I really appreciate it.

1

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