NFT preview card component challenge hub

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello Kehinde-Agboola , Congratulation on completing your first project. I have few suggestions, To tackle the accessibility issues :

  • Document should have one main landmark. Wrap the body content in< main>tag read more about main landmark.

  • Page should contain a level-one heading. You can replace the <h2> by <h1>.

  -You can replace this div <div class="attribution"> by a < footer>.

  -You need to add an interactive element around the image and <h2> Equilibrium #3429 </h2> .Antythig with a hover style in a design means it's interactive.

  -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 this case of <img src="./images/image-avatar.png" alt=""> alt shouldn't be empty .

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

  -<p> <a href="#" class="text">Creation of</a> <span> Jules Wyvern </span></p> in here, Why did you wrap the creation in an anchor tag ,Jules Wyvern should be wrapped instead.

  Last I would suggest to work on the width and the height of the component , it's way big. I really hope this feedback helps, Happy coding!

  Marked as helpful

  0
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @Kehinde-Agboola ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it. Especially I like the image overlay effect on your project.

  Here are some of the tips I like to provide.

  • I suggest you to try transition on hoverable elements like heading and creator name.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.
  • Font sizes and spacings aren't the same with design. As a front-end developer, it's important to meet pixel-perfect requirements.

  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

  0
• 

  Kehinde Agboola•150

  @Kehinde-AgboolaPosted almost 3 years ago

  Thanks for your feedback. I appreciate and I promise to put every correction to practice to become a better frontend programmer. Thanks

  1