Frontend Mentor | nft-card coding challenge solution

Community feedback

@faha1999

Posted over 1 year ago

Hello, Kahoe Andre Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

add <html lang="en"> not lang="pt-br"
add below styles to the main

main{
    background: #0d192b;
    background-blend-mode: exclusion;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

add alt="icon" attribute in img . This would help improve accessibility.
Bad value images\image-avatar.png for attribute src on element img: Backslash (\) used as path segment delimiter.
remove all margin from the .container. It's not needed anymore.
Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem
this is my solution of this challenge live,repo

I hope it will work. Happy coding.

nft-card

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community