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

Card component using CSS grid and flexbox

Shha5β€’ 70

@Shha5

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


Thank you for taking a look at my solution!

I used CSS grid to center the card on the screen and flex to create card layout.

All feedback is welcome and appreciated!

Community feedback

T
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Greetings, Shha5! πŸ‘‹

Good job on this challenge! πŸ‘ Your solution looks great! πŸ™Œ

One thing I'd like to suggest is to make the alt text for the icon images in the card component an empty string so that they will be ignored by screen readers. That’s because those elements aren't necessary/important for the content of the page and as a result doesn’t need to be noticed by screen readers.

And be sure to use rem and em in as many places as possible (not px if you can avoid it) so that the text and overall design of your site will scale with the root/parent font size. πŸ˜‰

It would also be nice to add a favicon to the site. There should be one in the starter files for this challenge that you can use.

Hope you find these tips helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

1

Shha5β€’ 70

@Shha5

Posted

@ApplePieGiraffe Thank you for feedback! I'll use your tips in the next challenge I do <3 Happy coding :)

1

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