NFT preview card component

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Nice work with this one. Viewing at your solution, I would like to recommend the following for you...

  • Remove width: 75%; in the .container to have a fix width.
  • Import the attribution style in the CSS file and remove style tag
  • Wrap the whole content of container with specific tag like main and attribution with `footer tag for readability. For HTML structures, refer it with this one Semantics
  • Include description for the alt in img tags
  • Adjust the opacity of the .img-container:hover .overlay rule set into opacity: 0.8;

  Above all, you did good in implementing the design. Hope this helps and Keep it going!

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Hassan Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  0
• 

  vinay kandoi•120

  @vinaximusPosted almost 3 years ago

  Nice job. Use the max-width property to not go beyond a particular width

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @hsn-ng ,

  I have some suggestions regarding your solution:

  HTML

  to tackle the accessibility issues:

  • There should be two landmark components as children of the body element - a main (which will be the NFT card ) and a footer (which will be the attribution).<Footer> should be in the <main >.

  • you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important;
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important; 
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            
  }
  
  

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

  • It would be better

  
   <h2 class="white-txt hover-text"><a href="#">Equilibrium #3429</a></h2>
   <p class="soft-blue">Creation of <a  class="white-txt hover-text">Jules Wyvern</a></p>
  
  

  • For any decorative images, each img tag should have empty alt="" andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images in icon-ethereum.svg" , icon-clock.svg" icon-view.svg"

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

  • The avatar's alt text shouldn't be alt="user" .You can use Jules Wyvern as an alt text.

  • You can read more about alt text

  Hopefully this feedback helps.

  0