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

A Simple NFT Card Component.

Afan Khan 70

@justmrkhan

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


  1. Do you think I used any outdated parts or layouts in this simple card component?

  2. Is there any other way/path I could have used to make this layout? Otherwise, any other practices I should have followed?

  3. As a developer, I believe my code must be clear to understand. Do you think it is complicated somewhere?

Community feedback

Abdul 8,540

@Samadeen

Posted

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

  • You should use <main class="container"> instead of <div class="container">.

This should fix most of your accessibility issues

  • You should also use flexbox to center your container both horizontally and vertically.

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Marked as helpful

1

Afan Khan 70

@justmrkhan

Posted

@Samadeen Hello, thank you for leaving a feedback. However, how can I center it with flexbox? I centered it horizontally with flexbox using justify-content because it has space to move horizontally.

The container doesn't have space vertically unless I had some margin on the top and that is how I centered it.

Also, if you can help me, I'd like to connect with you. Let me know how to fix this as I'm still learning flexbox.

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