Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

NFT preview card component

Hamza-Noah•310
@Hamza-Noah
A solution to the NFT preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)
Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Anosha Ahmed•9,300
    @anoshaahmed
    Posted over 3 years ago

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

    • wrap everything in your body in <main> OR use semantic tags OR give role="" to the direct children of your <body> ... Click here to read more
    • have at least one <h1> in your code

    Good job! :)

    Marked as helpful
  • Grace•32,130
    @grace-snow
    Posted over 3 years ago

    Damn I just wrote loads of feedback on css too then lost it 😭

    Oh well I'll try to summarise but it will be briefer...

    • use min-height 100vh not height
    • use max-width on the card not width
    • theres no need for the eye image to be in css when you are already using a pseudo element for the image hover effect. You can place that image in the pseudo as a background-image and get rid of the transform-translate stuff to center it as background images are positioned centrally by default anyway
    • stop nesting css selectors. I can't stress how important this is. Ykh will have nightmares on larger projects writing css like this. Use single class selectors as much as possible, keep your css specificity low
    • add padding to body or margin to card to keep the component from hitting screen edges on mobile

    Sorry for the rush - I hope that helps anyway. Good luck

    Marked as helpful
  • Grace•32,130
    @grace-snow
    Posted over 3 years ago

    This doesn't look finished yet I'm afraid. The solution doesn't match the design with content hitting (and going off) screen edges on mobile and some text a dark color on dark background, making it unreadable.

    Also, I can't see the hover states because you haven't used interactive elements.

    First thing you need to do is fix the html

    • use interactive elements (in this case anchor tags) for anything that should have interactive behaviour (hover styles indicate interactivity)
    • make sure those links are labelled once added - that means the image one will need alt text or its linn will need aria-label / aria-labelledby attributes or Sr-only text inside
    • never have text in divs or spans alone, always use meaningful elements
    • really, you need to use landmark elements on every webpage you do. That's what the warnings are about in your Report. This isn't a full webpage so it may be ok to skip, but it does no harm adding in a main element to wrap your component.
    Marked as helpful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub