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

NFT preview card component

pranav•120
@PrAnAvViNaYaKjAdHaV
A solution to the NFT preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


plz give your feedback, just your simple feedback can help me a lot 🙂🙂🙂🙂🙂

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22
    Posted over 3 years ago

    Greeting karamthedev , Congratulation on completing an another project . I have some suggestion:

    • Wrap the body content in <main >tag .Within body sits main and footer.

    • Don't use <span> for meaningful content <span class="cycanColor">0.041ETH</span> and<span>3 days left</span>you should have used <p> .

    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. And for this one avatar 's alt , it needs to be a brief description .

    • The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

    • Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and Equilibrium #3429 , Jules Wyvern.(in `this challenge is an anchor tag <a>)

    • You can use unordered list <ul> to wrap class="days" and in each list item would have <img > and <p>.

    • Always use classes to reference all the elements that you want to style. Don't use nesting css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

    • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

    • Never use pixel for font-size.

    • Use a css reset at the start, You can add

    *{
        margin:0;      
        padding: 0;
        box-sizing: border-box;/*border-box tells the browser to account for any border and padding in the values you specify for an element's width and height.  */
    }
    

    I really hope this feedback helps . happy and keep coding.

    Marked as helpful
  • Fluffy Kas•7,655
    @FluffyKas
    Posted over 3 years ago

    Hi there,

    Good job on this one, it looks pretty close! I have a few suggesting for you:

    1. You cannot assign invalid aria roles to elements. There's a selection of valid roles to choose from and from what I understand you can't just come up with one yourself. Giving something a role of container doesn't carry much meaning in itself anyway :) Give it a class of container if it's for styling purposes only, that's enough. Would be even better if instead of giving roles, you used semantic markup where you can! For example, your mainContainer div could be easily swapped with main.

    2. Alt texts: reading this article will help you a lot! I'd also like to mention ALL images, regardless of their purpose must have an alt text. If they're decorative, leave it empty, give it an aria-hidden="true".

    3. Check your spelling please, there are some typos in the text :)

    4. The text "Jules Wyvern" is probably a link to his profile so instead of just giving it a hover, it could be wrapped in an <a> tag.

    Marked as helpful
  • Web Wizard•5,690
    @rsrclab
    Posted over 3 years ago

    Hi, @PrAnAvViNaYaKjAdHaV ~

    Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

    Here are some of the tips I like to provide.

    • I suggest you to try transition on hoverable elements like image, heading and creator name.
    • Please try BEM for naming element classes. It will help you a lot on bigger projects.
    • Image tags must have alt attributes as standard.

    https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

    Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

    Cheers ~

    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

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