NFT_card

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Aziz, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • 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
  • use p element and not a div tags for the text
  • use min-height: 100vh instead height: 100% to body because Flexbox aligns child items to the size of the parent container

  Overall you did well 😁 Hope this help!

  Marked as helpful

  0

  ---

  

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  @denielden thanks for your feedback it's really helpful, I totally forget about the :hover, and I know that I should've used <p> for the text but is there any prob with it or just for the semantic ?(which is really important)

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @Njoura7 You are welcome! Above all for the semantics but also for the simple fact that the div was not born for the text. Keep it up 😁

  0

  

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  @denielden thank you again for your feedback I got everything fixed now, if you could just give me a hint on how could I make the "view eye" fully visible instead of having an opacity of 0.5 I ve tried several ways but I couldn't fix it

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @Njoura7 have you tried to figure out how to do it by looking at my solution?

  0

  

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  @denielden yess, but it was with tailwinds wich am not familiar with it :') but I think you used transition and there was some property called -webkit I always see buit never understood it :'') and sorry for the late reply I was busy with other projects x'd

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @Njoura7 the transition serves to make the change more fluid but it isn't that which creates the effect, read here -> transition css

  -webkit- on the other hand is a medium that is used by the browser to make the transition property work correctly.

  What you need to do is place an absolute div over the card image and with hover when you hover over it to show the content in the background and eye. Think like it's turned off and on hover it turns on. read here : hover

  Hope this help! 😁

  Marked as helpful

  0

  

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  @denielden thank you for your explanation I think I got it right now that was helpful, and btw I visited your portfolio and I really like it it's smooth and totally responsive, except that I don't speak Spanish xd haha, keep it up bro and thank you for helping lot of people here you're making the community better

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @Njoura7 You are welcome and Thanks! I can't speak Spanish either... I'm Italian XD hahaha. Let me know if you finally succeed! :) keep it up

  0

  

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  @denielden ohhh sorry man haha :") I should've googled some words at least to know what language it is xD anyways I've just fix it feel free to have a look

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @Njoura7 No problem ;) Now it's much better!

  0
• 

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  This small project is nothing but a quick reminder to us that no matter how easy or simple the project is it might help to sharpen our skills (practice makes perfect as we all know), but also it can improve new skills, for example, I am not the UI/UX guy, but such projects will definitely help me improve my "designing eye"(colors, fonts, shapes and features that can attract users), Your feedback is appreciated(about the design or this paragraph) oh, and btw can someone explain to me what's wrong with those accessibility issues, I visited the link of the report and it felt overwhelming. Thank you and have a good coding journey

  0

  ---

  

  Shonuff•280

  @TheShonuffPosted over 2 years ago

  @Njoura7 Nice job on the project. I learned a few things looking at your CSS myself. The HTML report is indicating you need a <main></main> tag and a role for your div container. The links generated in the report will help you with the naming of the roles....

  Marked as helpful

  0

  

  Aziz Najjar•240

  @Njoura7Posted over 2 years ago

  @TheShonuff ohh thanks man i really appreciate your tip, and I am happy that you learned some stuff by role do you mean class ? coz I gave the div container a name but idk, anyways ill check the link as you said and thanks again

  0

  

  Shonuff•280

  @TheShonuffPosted over 2 years ago

  @Njoura7 Per the link in the HTML report..

      <head>
          <title>Hello</title>
      </head>
      <body>
          <div role="banner">This is the header</div>
          <div role="navigation">This is the nav</div>
          <div role="main">This is the main</div>
          <div role="contentinfo">This is the footer</div>
      </body>
  </html>
  

  0