Skip to content
Submitted over 1 year ago

HTML CSS NFT preview responsive

Julia•60
@juliavilbert
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, just changed some things (added <a>) but the hover icon at the main image isnt showing anymore

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    The solution looks much better now, I just have a few small suggestions.

    • Use "./" before the file path of the image to display it.

    ‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎✅ Do: <img src="./images/image-equilibrium.jpg" alt="">.

    ‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎❌ Don't: <img src="/images/image-equilibrium.jpg" alt="">.

    More information here.

    • You should wrap the image, title, and creator's name in an <a> tag, since an element has a :hover state and has a pointer cursor it is considered an interactive element (buttons, links, etc).

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    3
    Julia•60
    @juliavilbertPosted over 1 year ago

    @MelvinAguilar Thank you I changed it and now it is working!

    0
  • Bernard Rodrigues•250
    @bernard-rodriguesPosted over 1 year ago

    Hello, Julia!

    Congratulations by your solution!

    I'd like to give some feedback based on you Acessibility and HTML validation reports.

    Acessibility Reports

    • Documents must have <title> element to aid in navigation: It is very important to use a <title> tag inside your <head> tag. The <title> tag will, as the name suggests, define a title for your website. This title will be showed in your website tab, in the browsers, besides its favicon.

    • Images must have alternate text: For acessibility reasons, it is very important to use the alt attribute in <img> tags. You can describe the image with this tag. This text will be showed to the users when the image URL were not available for some reason, and it will be read by readers, used by people with visual disabilities.

    Example: <img src='logo.svg' alt='My website logo' />

    HTML validation reports

    It looks like your id's names aren't described as strings, between quotes (" or '). It is generating some HTML validation reports. Try to describe ids as follows:

    <img id="id-name" src="image.png"  alt="image description" />

    I hope it could help! Keep on with the good job!!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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