NFT Preview Card

Community feedback

• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @Hyuuga81 ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  1. I hope you to add transition effects on hoverable elements like image, heading and creator name.
  2. Some font-sizes, spacings and alignments aren't the same with the design. As a frontend developer we need to be pixel-perfect and responsiveness.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  1

  ---

  

  P

  Jay•260

  @Hyuuga81Posted almost 3 years ago

  @tymren608 Tymur thanks so much for the feedback. Your project looks amazing and most importantly pixel-perfect. I will revisit this project and make some changes. I really appreciate your advice.

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  hello Hyuuga81 , I have some suggestion:

  • 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. And alt in the avatar img shouldn't be empty . read more about alt for informative or decorative images..

  • Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and Equilibrium #3429 , Jules Wyvern.(in this challenge is an anchor tag <a>) .

  • The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

  • It's best not to leave some code commented .

  • You can use unordered list <ul> to wrap <div class="countdown">and in each list item would have <img > and <p>.

  Hopefully this feedback helps.

  Marked as helpful

  0
• 

  Anubliss•460

  @Anubliss-0Posted almost 3 years ago

  Hi Jay,

  To get the container to turn blue on hover, I wrapped the image in a container and set the background color to blue

  background: #00fff8;

  Then I targeted the image inside the container itself with the following...

    mix-blend-mode: normal;
    opacity: 0.5;
    border-radius: 8px;
    transition: linear 0.25s;
  }
  

  The transition isn't necessary, but it looks cool so I used it!

  Great job completing this challenge!

  Marked as helpful

  0

  ---

  

  P

  Jay•260

  @Hyuuga81Posted almost 3 years ago

  @Anubliss-0 I just did a js fiddle to test. Looks beautiful. Thanks so much for taking the time to look at my project and answer my question. It's great that I can find out how you solved the challenge on here. Appreciate the knowledge so much!

  1