NFT Preview Component Card

Community feedback

• 

  Kehinde•660

  @jonathan401Posted over 2 years ago

  Congrats on completing this challenge 🎉. You did a really good job and the result was good overall 😇. Here is my feedback:

  1. You should consider replacing the div that surrounds the whole card i.e <div class="card-container) with a main tag or element this will help make your html markup semantic as well as accessible and easy for users with disabilities to easily navigate your site. You could check out this w3schools tutorial on html landmarks.
  2. You could try making the card title a h1 element instead of a p element. This is because the WCAG guide requires that ever page should contain one h1 element. You could read more about that here 😉
  3. You could also try making the .price-time-container a ul element since it provides a an easier way to display a list of items and as an added bonus, makes your html markup more semantic and accessible 😇
  4. In your style.css file you should remove the margin 0; padding: 0; from the body selector since you already defined this style rule in the universal selector (*) 😁.
  5. Also try adding the style rule: box-sizing: border-box; to your universal selector. Adding this to your universal selector will save you from a lot of unexpected layout and sizing issues 😅. This is because by default, properties such as padding and border are added to an element's width and this might make an element bigger but adding the box-sizing: border-box; rule will make sure that padding and border are included in an element's width and height 😁. You could checkout this article by w3schools to help you better understand the box model 😉 I guess that's all from me 😄. So sorry this got a bit lengthy 😅 just wanted to make sure you don't run into any issues when creating your project and also help make you sure your projects are more accessible 💪. Hope this helps 😇. Once again congrats on completing this challenge 🎉🎉

  Marked as helpful

  0