NFT card component with HTML and CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @princej02,

  Congratulation on completing frontend mentor challenge.

  I have some suggestions regarding your solution:

  • First of all , I would suggest to have a separate file for the styles.

  • To tackle the accessibility issues: Page should contain a level-one heading . In this challenge , you can use <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

  • You should use a header for Equilibrium #3429 , <h2> will do.

  • Anything with a hover style in design means it's interactive. you need to add an interactive element <a> around the image , Equilibrium #3429 and Jules Wyvern.and add the hover effects on them

  • 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 in( icon-view, icon-ethereum, icon-clock ).

  • The avatar's alt should not be empty , you can use the creator name Jules Wyvern. Read more how to write an alt text

  • The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • To use more semantic tags , you can use <ul> to wrap class="bottom"and in each <li> there would be<img>and <p>.

  • For the avatar's part class="creator-footer ", you would use <figure> and <figcaption>.

  • Use min-height: 100vh; instead of height: 100vh allows the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page.

  • width: 20rem;an explicit width is not a good way . consider using max-width to card instead and a little margin to the card .That will let it shrink a little when it needs to.

  • height: 33rem It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

  • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  General point : Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.

  You might have a look at my solution , to see how I did the hover effect on the image , it might help.

  Overall , your solution is good. Hopefully this feedback helps.

  Marked as helpful

  0
• 

  Prince•210

  @princej02Posted over 2 years ago

  Oh my days i forgot to add that, thanks for the feedback.

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Prince, I took some time to look at your solution and you did a great job!

  You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution

  Overall you did well :)

  Hope this help and happy coding!

  0