NFT Card Design

Community feedback

• 

  Rohit Deshpande•870

  @rohitd99Posted over 1 year ago

  Hi Jan van Ierssel

  Congrats on completing the challenge.

  I just wanted to point out a few things, which can improve the solution.

  1. I noticed you've used h3 for the title, but an h1 heading would be more suited. For each page a single h1 heading is always expected and all the headings must be in order from h1 through h6. h1 generally goes for the title, h2 for subtitle and so on.
  2. Also on you've put height: 100vh on body , main but min-height : 100vh should be used if you want them to stretch as per content. Although on this challenge it wouldn't make much difference.

  Hope it helps

  Marked as helpful

  2

  ---

  

  Jan van Ierssel•20

  @JanvampiersselPosted over 1 year ago

  @rohitd99 Thank you for the tips!

  0
• 

  C4rlos•410

  @solracssPosted over 1 year ago

  Also this image that have hover action on this suggest that it's clickable element. So it should be link or button.

  For making horizontal line good practice is to use <hr> or just use border-top/bottom of adequate container.

  Images used as icons do not need alt text (ether, clock).

  Overall very nice job! Really like it!

  1
• 

  Rebecca Padgett•1,840

  @bccpadgePosted over 1 year ago

  Hello @Janvampierssel. Congratulations on completing the challenge!! 🎉

  Your solution looks great. I have few suggestions to improve your solution.

  HEADING TAGS

  It is best practice not to skip heading tags in HTML. In future projects just make sure to use headings tags in chronological order.

  • Equilibrium #3429 needs to be wrapped in a h1 tag

  <h1>Equilibrium #3429</h1>

  CSS

  Font size should always be in rem units because pixels is an absolute unit that remains constant regardless of the screen size.

  More info 📚

  Hope this helps you and don't hesitate to reach out to me if you have any questions

  Rem units for font size

  1

  ---

  

  Jan van Ierssel•20

  @JanvampiersselPosted over 1 year ago

  @bccpadge Thanks for the tips! I was wondering whether to use an h1 or an h3 because the title for the card did not seem very descriptive of the page and seemed more like it would be a sub-component of a larger page. But I'll keep this in mind for future challenges

  About the sizing, is it not correct to set a base size on the main body to then have every element use em/rem? (Since em/rem is relative to some pixel size as I understand)

  0
• 

  Michael Johnson•970

  @mikej321Posted over 1 year ago

  Hey there,

  Something that I learned that may be of value to you that I got from a book about Tailwind...when it comes to sizing, just attempt to get it as close as you can and go from there. As long as it's close enough, it's fine and not to worry about being 'pixel perfect'. I remember I would do the same, constantly changing values to get it to be exactly the same. It is headache inducing, haha! Hope this is of some value to you and happy coding!

  Michael

  0

  ---

  

  Jan van Ierssel•20

  @JanvampiersselPosted over 1 year ago

  @mikej321 Haha you called me out on that one. The time I spent on tweaking the values to try and match it as close as possible would make even a person with OCD scared. Thanks for the tip!

  0

  

  Michael Johnson•970

  @mikej321Posted over 1 year ago

  @Janvampierssel No biggie, I know the pain. Lol even now, I still catch myself doing it and having to remind myself that there are other parts of the project that could use my attention more. In ways, it's more about managing your time and which issue requires more of your attention than others. Glad to have helped and good luck on your coding journey!

  Michael

  0