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 Component Card

@alvaroormeno

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


Please let me know if you have any feedback!

Community feedback

Kehinde 660

@jonathan401

Posted

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

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