NFT Card Preview

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi Kenisa,

  Congratulation on completing this challenge.

  Excellent work! I see you have received some incredible feedback .If you don't mind, I have few suggestions regarding your solution:

  HTML

  1. The icon-view doesn’t really need to be in the HTML as there's need for extra clutter in the HTML . You can use CSS for it

  2. 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.

  3. For any decorative images, each img tag should have empty alt=""and add aria-hidden="true" attribute to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).

  4.look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

  5. If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the <div class="hr"></div>, you can use border-top: to the avatar's part.

  6. To use more semantic tags , you may use <figure> and <figcaption> for the avatar's part.

  7. The avatar's alt should not be creator profile pictureit’s meaningless. You can use the creator's name Jules Wyvern. Read more how to write an alt text

  8. For middle part of the card class="details", you can use an unordered list <ul>, in each <li> there should be <img> and <p> that way you can align them centrally.

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

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

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Here I've placed the icon with a pseudo-element, maybe I don't have the best explanation, but are basically elements that you can apply before or after other element, without a need to add a code inside the html, in this case I used content and linked the icon url and manipulate its position with position: absolute/relative

  .img-container:before {
      content: url(./images/icon-view.svg);
      opacity: 1;
      transform: translate(119px, 127px);
          position: absolute;
      transition: opacity .2s ease-in-out;
      border-radius: 1rem;
  }
  

  In the majority of cases I see people using it to add some decoration to a code, like a icon before a heading, or pattern background inside a container using a position that usually is not easy just with and element inserted in the html

  Probably my explanation wasn't so good, so I let you there documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

  Marked as helpful

  0

  ---

  

  Kenisa•90

  @KenisaReneePosted over 2 years ago

  @correlucas oh the url in the content is something I hadn't thought of. I'll try it out! Thanks so much for all the extra info, Lucas!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Kenisa, congratulations for your solution!

  I've inspected your code and I saw that you manage together the opacity for the hover effect and also for the svg icon, this is why also the icon gets the 60% transparency from the overlay itselft.

  You can try to manage these opacity separately, or if doesnt work you can try to replace the icon with a pseudo-element.

  I've managed the effect a little bit differently, but you can check my solution to have it as a reference if you want to: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

  Hope it helps and congrats for this amazing solution!

  Marked as helpful

  0

  ---

  

  Kenisa•90

  @KenisaReneePosted over 2 years ago

  @correlucas Thanks, Lucas! I tried working with a pseudo-element for the line and couldn't figure it out so I tried a different approach in the end. Pseudo-elements are still new to me, but I'll give your suggestion a shot and see if I can learn something new here.

  0