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 Component

#foundation

@kaushik-2318

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@thomashertog

Posted

I hate to break it to you but

this only looks like a very pale resemblance of the design

  1. colors are off
  2. sizing is incorrect

the code feels generated

  1. HTML is absolutely not semantic
  2. inline styles are being used
  3. positioning relatively WILL break if you make any change to contents

Marked as helpful

0

@kaushik-2318

Posted

@thomashertog Thank you very much sir. Please now check it is okay.

0

@thomashertog

Posted

@kaushik-2318

I can see that the code is updated, you removed the inline styles. However the design is still not similar, (the colors are fixed, but now there is no hover effect anymore, sizing is still wildly incorrect).

It still does not include semantic HTML (e.g. Pic as alt text, ...), your headings are not in order (<h2> without <h1>), ...

And there's still position: relative all over the place.

I've taken a look on your other challenges and would strongly advise you learn a bit more before practicing. Web.dev has some great resources

Marked as helpful

0

@kaushik-2318

Posted

@thomashertog Thank you very much Sir for your advice. Sir instead of position: relative some other way to align item in proper other?

0

@thomashertog

Posted

I'd suggest you take a look into flexbox and CSS grid. maybe also try catching up with some of the materials available on web.dev (which i linked in my previous comment) @kaushik-2318

0

@kaushik-2318

Posted

Okay Sir. Definitely I will try it. @thomashertog

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