Skip to content
Submitted almost 2 years ago

NFT-Card HTML and Tailwind CSS [project #4 submission-4]

Zou•190
@zouvier
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

What i learned:

  1. transition effects /w images and color
  2. how to use span properly to align images and text together
  3. Getting grid items to share the same row and col
  4. how to properly set up fonts and sizes thanks to: https://wizardry-technique.webflow.io/

Overall was a good learning experience!

[UPDATE - 1]

  1. switched to tailwind css
  2. made it responsive and will work with any screen down to 375px
  3. learned about rgba
  4. gained a more nuanced understanding of when to use flex vs grid.
  5. should be more in line, but will fix smaller aesthetics in next submission

[UPDATE -2]

  1. fixed accessibility issues
  2. focus now works for all hover effects
  3. image overlay is now responsive and scales with screen
  4. fixed minor aesthetic issues

[UPDATE -3]

  1. all accesibility issues are now cleared
  2. card now matches design

Community feedback

  • Grace•31,230
    @grace-snowPosted almost 2 years ago

    Hello

    There's a few issues on the html in this which are causing accessibility errors

    1. Every img must have an alt attribute. Look up how to use it correctly for important vs decorative images

    2. The link needs to wrap the whole image - try focusing on keyboard and see what happens

    3. The hover style should also happen on focus-visible

    4. The link wrapping the image has no accessible name. Search engines and screenreaders would have no idea what that link does

    5. You are using padding to separate items (create outside space) instead of margin

    6. Do not give your card a min-width. There is no need. Just a max-width. This is overflowing my mobile screen at the moment and hitting screen edges. Instead the card should have a max-width only and some margin around it. The image/overlay div inside should not have an explicit width either - just width 100%

    7. You are missing a heading element. The anchor tag on the title should be within this heading

    8. Inline svgs that are decorative need aria-hidden="true" focusable="false" on them

    9. Make use of gap and justify content to create horizontal spacing between the price and time elements, no weird calc margins are needed

    10. Every page must have a main landmark

    Marked as helpful
    0
    Zou•190
    @zouvierPosted almost 2 years ago

    @grace-snow Went through your suggestions and fixed it up. Thanks 🙏

    0

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