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 HTML and Vanilla CS

shalomkerryā€¢ 260

@shalomkerry

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


it took me more time than I thought. getting the image hover effect took time. i learnt I can use the link tag 'a' to manipulate it which became really handy. Another thing I struggled with was naming CSS. I figured it would be good to learn naming in my current beggining steps will benefit me. I found the BEM method while searching for the best method I might have to learn it before learning other challenges.

Community feedback

P
Alysson Gomesā€¢ 470

@EONRaider

Posted

Hello. Take a look at CUBE CSS if you're interested in methodology. You can still use BEM along with it but it will also help you structure your code.

Marked as helpful

1
Marcos Travagliniā€¢ 4,920

@Blackpachamame

Posted

Greetings! you have done a great job šŸ˜Ž

šŸ“Œ Some suggestions

  • To improve the semantics of your HTML, you can change your <div class="attribution"> to a <footer class="attribution">
  • For what purpose have you placed your image in dropbox and then called it from your site? This will only make the image take longer to load. You just needed to import it from its folder like this: src="./image-equilibrium.jpg"
  • Same for avatar image: src="./image-avatar.png"
  • Add a padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same result

Marked as helpful

1

shalomkerryā€¢ 260

@shalomkerry

Posted

@Blackpachamame hey, thanks for the advices. I am using stackblitz to do these challenges and it won't access the image folder for reasons I don't get.

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