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

Simple html/css

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


dynamic sizing is a bit of an issue

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Ngewe! 👋

Good effort on this challenge! 👍 It's great that you are using width and height attributes for every image. By using those attributes, it would optimze the CLS (Cumulative Layout Shift).

However, I thought that there are two things that can be better.

  • Firstly, I would recommend removing all the nbsp. I'm not sure what is the use case of them, but if you want to create a space between the two elements, I would recommend using flexbox.
  • Secondly, on mobile landscape view, the card is broken. So, I would recommend you learn more about CSS and then come back and fix this issue.

Also, I would highly recommend removing all the tags that are currently applied to this solution. You don't use any of the technologies to build the site.

It's important that you are only using the correct tag for your solution because in the future if you are going to set yourself as available for work, and then the recruiters see your solution tagged with Sass or JSS but you're not actually using it, you might get a red flag.

All I have to say is that you need to learn more a bit about CSS in general and about responsive design and then if you want you can fix all the issues that I have mentioned.

That's it! I hope this information is useful! 😁

0

@IzzyDoes

Posted

@vanzasetia thank you so much, I’ll take note of these right now and make fixes to them.

0
Vanza Setia 27,795

@vanzasetia

Posted

@IzzyDoes You're welcome! 😉

0
Hamza-Noah 300

@Hamza-Noah

Posted

Hey To get rid of the accessibility/HTML issues shown in your Report:

wrap everything in your body in <main> or use or give role="" to the direct children of your <body> have at least one <h1> in your code

and now let us move to the design feedback let me give you some feedback here first, make the card centred vertically second, try to use the same font size and line-height for the paragraph after the card title third, increase the size of the icons and text after the paragraph fourth, you are using too much padding horizontally try to make it close as possible

hope this will be 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