Profile card component using Flexbox and Grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi there! 👋

  The URL for the site is not correct: https://why-not-phoenix.github.io/profile-card-component-main-/](https:/why-not-phoenix.github.io/profile-card-component-main-/

  It looks like you are trying to create the URL with Markdown syntax. But, there's no need for that, just type the URL on the input, https://why-not-phoenix.github.io/profile-card-component-main-/.

  Some feedback.

  • Alternative text should not be hyphenated (like code).
  • The pattern card is a decorative image. So, leave the alt="" empty to hide it from screenreader users.
  • Alternative text for images should not contain any words that are related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
  • For the media-activity or the statistic, I recommend making it as ul and wrapping each list with li. If the site has no styling then it would more likely be a list.
    • 80k followers
    • 803k likes
    • 1.4k photos
  • Last but not least, I recommend fixing all the issues that have been reported.

  Hope you find this useful!

  1

  ---

  

  why-not-phoenix•90

  @why-not-phoenixPosted over 2 years ago

  @vanzasetia Thanks for the feedback. Is there a way to edit my submission to correct the incorrect URL?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @why-not-phoenix You can do that by visiting the "Challenge Hub" for the particular challenge and on the secondary navigation click "Update Solution". Right there, you will be able to fix the URL. 🙂

  1

  

  why-not-phoenix•90

  @why-not-phoenixPosted over 2 years ago

  @vanzasetia

  Hi again 🙂

  Just updated my code, what do you think about the outcome? I worked on everything you said. Giving an alt for the profile picture was difficult without adding words relating to image. Also, The accessibility issues I had were due to the incorrect link and not my code itself; after updating the link, only one issue popped up and I rectified that. Are there any more improvements you think I can make? I feel like my codes are usually too long and maybe could be optimized. Anyway, thanks for everything and I'll be looking forward to more.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @why-not-phoenix For the profile picture, you can use his name as the alternative text.

  As far as the HTML goes, I would recommend using span for each text. The text is already wrapped by li which is a meaningful element and also span won't affect the accessibility of the site. (You can disable the CSS to check the accessibility of the site).

  Also, put the attribution outside the main landmark. Then, wrap it with footer landmark instead.

  You're welcome! 👍

  0