Skip to content
Submitted over 2 years ago

HTML CSS NFT preview responsive

Julia•60
@juliavilbert
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Code

Please log in to post a comment

Log in

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    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
  • Bernard Rodrigues•250
    @bernard-rodrigues

    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

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