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 card with flexbox layout and basic css styling

fath 30

@fath-nasrudin

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


i just learning frontend and currently i learn about layouting. i would like to get feedback from you guys.

Community feedback

ChrisEski 110

@ChrisEski

Posted

Hey there, the overall outcome is really nice, congrats on that!

Now about what i have noticed:

  1. Since it's a card with some functionality on hover over the image, the title and the creator's name, i guess that these elements would be there to link you to a more detailed article or some kind of futher details about the crypto. So it should be better if you used them as <a> elements rather than <divs>

  2. This comes from the above, you should try using semantic html, which I'm not really good at, but the main idea is that you should have an <h1>, a <main> section, and generally use <div>s when there is not something more specific to use.

  3. About the accessibility I have not much to say since I also struggle there and I currently try to pay some attention on that too.

  4. What I've also noticed is that in your design the card size remains the same throughout the screens variations. As i can see from the design images, I'm pretty sure it ges only a little bit smaller on mobile as well as the typography changes, but not that much to be a problem imo.

  5. Last, which is not of any big importance, you should take some time to fix the links in the attribution section, so that anyone can reach you :)

Nice work and keep on learning...

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