Responsive solution with HTML, SCSS with BEM and plain JS

Community feedback

• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Good job with this challenge GrzywN. Keep up the good work.

  Your solution looks great however if you compare the image in your solution against the design it is different. Try changing the position of the image using the background-attachment property.

  I hope this helps.

  Cheers,

  Happy coding 👍

  Marked as helpful

  0

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @TheCoderGuru Thanks! I'll try fixing this image, but it probably won't be pixel perfect. Happy coding!

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Karol! 👋

  Congratulations on finishing this challenge! 🎉

  I have some feedback on this solution:

  • Accessibility
    • Alternative text for images should not contain any words that 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.
    • Good job on having an aria-label for the button! 👍
    • Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly (like submitting).
    • I think having an aria-label for each social media links are enough, there's no need to put title attribute there. Also, the title attribute is known to be problematic.
  • Styling
    • On 560px until 876px width, the card starts becoming too large. I would recommend adding max-width to the card.
    • I would recommend adding some padding on the body element to prevent the card from touching the left and right edges.
    • Also, I would recommend setting the max-width of the article or the card element with rem or em units. Setting max-width: 50vw will always make the card getting bigger.

  That's it! Hope you find this useful!

  Marked as helpful

  0

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @vanzasetia Thank you so much for your advice! I still have a lot of work ahead of me. I will update my solution in the near future with the advice you gave me. Have a great day and coding!

  0