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

Responsive solution using SCSS Grid and Flexbox

Rinoβ€’ 340

@Rhinozer0s

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


Hey guys,

hope for feedback :)

Community feedback

Ferβ€’ 3,970

@fernandolapaz

Posted

Hi again πŸ™‚, perhaps some of this may interest you:

HTML:

  • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' should be wrapped with the <a> tag (inside the <h1>).

CSS:

  • The trick of setting the font size: 62.5%; is no longer commonly recommended because it can cause issues with accessibility and readability. Also, it’s good to get used to thinking directly in relative units like rem or em since they are the most suitable for most cases.

I hope it’s useful : )

Regards,

Marked as helpful

1

Rinoβ€’ 340

@Rhinozer0s

Posted

thanks @fernandolapaz,

I just added the links

can you tell me more about the issue with the trick of setting font-size: 62.5%; and name a source were i can read about? I never had any problems until now.

0
Rohit Deshpandeβ€’ 870

@rohitd99

Posted

Hi Rhinozer0s

Congrats on completing the challenge.

I have a suggestion which might interest you :

  • You have used div for the card, instead of div you can use main which is a semantic element. Read more on semantic elements here.

Hope it helps you. Happy coding.

Marked as helpful

0

Rinoβ€’ 340

@Rhinozer0s

Posted

Thanks @rohitd99 for your advice!

I thought about that, but decided to went with the div because if there were several such cards, a div would make more sense.

But especially in this case i agree with you.

0
Ferβ€’ 3,970

@fernandolapaz

Posted

Hi πŸ‘‹,

It seems that the link to the code on GitHub leads to the files of another challenge... πŸ™‚

Regards,

1

Rinoβ€’ 340

@Rhinozer0s

Posted

@fernandolapaz,

oups thanks, i'll fix that quickly

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