NFT Preview Card Component Challenge

Community feedback

• 

  P

  Katrien Schuermans•1,210

  @katrien-sPosted about 3 years ago

  Good job for a first challenge. Even though this looked rather simple, there were some tricky parts. I noticed you left them out. The hover on the image and all the other hover-effects. The hover on your h2 and span can be done by the pseudo-selector :hover. The hover on the image would be more complex. Check other solutions to see if you understand how it's been done. There's various ways, so I don't want to push only one solution.

  There are some things you need to be carefull with. You've used a h2, h3 and h4. Be aware there is people who acces websites with screenreaders. They will always prioritize h-tags. It's better here to have all (maybe apart from the h2) written as p. Add classes or use selectors like p span to declare them. Read into accessibility and HTML-semantics.

  You also didn't declare font-sizes. Which is ok to so do here, but do it in your next project.

  As for the naming of your classes. Think about how this little design would be part of a big website. If you begin calling your images first-photo, second-photo, you'll be struggling once the projects get bigger. Class-names should be logical and preferably reusable. In this example we're building an NFT-card. So call first-picture, for instance NFT-artwork. This also makes it easier for other developers to read your code. When using logic names, the code becomes easier to read.

  Marked as helpful

  0

  ---

  

  Mark Colinares•60

  @NewCoderExPosted about 3 years ago

  @graficdoctor .... Thank you for your feedback Katrien! I will make sure to take all your points in my next coming challenges. Hope to hear again from you!

  0