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

gcWDev• 20

@gcWDev

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


My main question is:

What do you guys do when you get stuck ? I for example got pretty stuck on the overlay component for when the image is hovered over. I simply copy pasted a solution I knew would work from stack overflow and just left it there. What can I do to turn that into a learning experience and how would you guys approach a similar problem.

Community feedback

Elaine• 11,420

@elaineleung

Posted

Hi gcWDev, well done completing your second challenge! This is a really good question. Like you, I'd scour the Internet for answers, and then I'd just keep trying and testing until something works. If I still can't get it, then I step away for awhile and work on something else. At times when I needed to use someone else's solution, I would first study their code to make sure I fully understand what's going on, and then I'd try to build it again myself as a test, like on CodePen. Whenever possible I'd try to reuse that knowledge so that I know I really learned it. I've seen other members post half-done solutions just so they can ask the community for answers; I think that also works because it's a way to notify others you need help, and others can view your code to see what the issue is.

By the way, it looks like your image isn't showing up; try adding a dot in front of the slash in the image path. That worked for me when I just tested your site in the browser.

Keep going, you're doing great! 😊

Marked as helpful

0

gcWDev• 20

@gcWDev

Posted

@elaineleung wow, those are some great suggestions, I think I'll start posting incomplete assignments that would probably be the best way to get direct feedback, thanks !

0
Shady Omar• 950

@Shady-Omar

Posted

Hello gcWDev,

Good job on this challenge, But here is a tip to show the images of this design while using GitHub pages

= change the src attribute of the img tag from src="/images/image-equilibrium.jpg" to src="images/image-equilibrium.jpg"

= Also the change avatar image src attribute from src="/images/image-avatar.png" to src="images/image-avatar.png"

Hope this helps.

Marked as helpful

0

gcWDev• 20

@gcWDev

Posted

@Shady-Omar Thanks ! ill take care of that right now

0
Tochi• 190

@tchydy

Posted

Hello GCWDEV’S, Welldone on completing a project here! I think you are on the right track because we all get stuck, good thing is you are seeking help! So for the hover, what i suggest is make it visibility hidden then on hover it would be visiblity: visible; I recently completed this challenge as well you can check out my code here https://github.com/tchydy/nft-preview-card-component-main Hope this helps you. Happy coding!

0

gcWDev• 20

@gcWDev

Posted

@tchydy ahhhh i think i see what you mean, I'm gonna try it again using that method instead of the one I used, thanks!

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