Mobile First Design | NFT Preview Card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  Hello there, Muh Suryadi! 👋

  Congratulations on finishing this challenge! 🎉

  I have some feedback on this solution:

  • Accessibility
    • Good job on using main landmark! 👍
    • The Ethereum and clock icons are decorative, so they should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images.
    • On this challenge, use interactive elements (a) for any elements that have :hover or :active states.
    • The alternative text for the avatar should not contain any words that related to image, such as avatar, photo, graphic, etc. The screen reader will pronounce it as an image so you don't need to put the word Avatar as the alternative text.
    • Always wrap text content with a meaningful element (p). Only use div and span for styling purposes (not as the main wrapper of the text content).

  <p class="card__prize">
    <img src="assets/images/icon-ethereum.svg" alt="Icon Ethereum"> 0.041ETH
  </p>
  

  • Don't change the root or html font size. Changing the root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. Modify the font size on the body element instead.
  • Use rem or sometimes em unit instead of px (especially font size). Using px will not allow the users to control the size of the page based on their needs.
  • Styling
    • I would recommend making the body element as the main container instead of the main element. Also, it is recommended to never limit the height of the page so use min-height instead of height.
    • Add some padding on the body element to prevent the card from touching the edges of the browser. Currently, on mobile landscape view, the card touches the top and the bottom of the browser (full height).

  That's it! Hopefully, this is helpful! 😁

  Salam dari Lampung! 😄

  Marked as helpful

  1

  ---

  

  Muh Suryadi Triputra Rahman•400

  @msuryaditriputraRPosted almost 3 years ago

  @vanzasetia Impressive, you have valuable suggestions. I have learned a lot of new things from you 😁

  thanks for sharing with me, I will write my code better than before 🛠

  btw do you have any recommended resources to learn about accessibility? I'm so blind to it and I don't know where to learn it 🙏

  I really appreciate your kindness 😇 I hope we can be connected 😁

  Glad to know you, Salam dari Makassar 😎

  𝗛𝗮𝗽𝗽𝘆 𝗖𝗼𝗱𝗶𝗻𝗴 ☕ 𝗗𝗮𝗻𝗯𝗼

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @msuryaditriputraR Here are some resources on accessibility:

  • Check your web accessibility using this tool
  • WAI about images (how to handle images)
  • Scott O'Hara blog post - He has a lot of great blog posts about accessibility
  • Accessibility Myths - It will tell you the truth 🙂

  I would like to ask two questions,

  • Are you a self-taught developer? If not how do you learn web development?
  • Also, are you already working as a professional web developer or still learning?

  If you ask me those questions, I am a self-taught developer and I am not a professional web developer yet.

  Happy coding too! 😄

  1

  

  Muh Suryadi Triputra Rahman•400

  @msuryaditriputraRPosted almost 3 years ago

  @vanzasetia Thanks, your resources are extremely helpful for my learning progress 🙂

  yeah, me too.. i'm a self-taught developer and i'm still learning 😄

  Keep Learning 🔥

  1
• Account deleted

  Hi there 👋

  Congratulate on finishing your project 🎉. You did a great job 🔨

  I give some suggestions that I hope help you take your project to the next level 📈.

  1. The overlay color shouldn't be full green color it should have some opacity. For that lets add background-color: hsl(178deg 100% 50% / 50%) to .card__image .overlay

  Happy coding ☕

  Maqsud

  Marked as helpful

  1

  ---

  

  Muh Suryadi Triputra Rahman•400

  @msuryaditriputraRPosted almost 3 years ago

  @maqsudtolipov thanks for the advice. I will fix it

  1
• 

  Aadvik•1,250

  @Aadv1kPosted almost 3 years ago

  Great job on nailing the component 👍. Only suggestion i have, is maybe turn the opacity of the overlay down a bit to make it a bit closer to the intended design

  Marked as helpful

  0

  ---

  

  Muh Suryadi Triputra Rahman•400

  @msuryaditriputraRPosted almost 3 years ago

  @Aadv1k ah i missed that. thanks for reminding

  1