Social Proof Section with Sass

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi There!

  I agree with Tee, you should not make the design size as your breakpoint for media query. So, let say on 1280px your website looks good for desktop layout then switch to desktop layout on 1280px.

  I have some feedbacks on this solution:

  • Accessibility
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technology such as screen readers or screen magnifiers ignore those images. In this case all images are decorative only except the photo.
    • In my opinion, saying the orientation of the photo image is useless, since it doesn't give any useful information. But, if you have a good reason to do that, please tell me.
    • Ensure headings are in a logical order to make users that use assistive technology (screen reader, etc) can easily navigate your website. You should use h2 instead of h5 for the user name.
    • For the Verified Buyer text, I would recommend to make it a paragraph element instead of heading to make the page structure much easier to understand.
    • For more semantic HTML, I recommend to swap the review div with blockquote.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Non Accessibility
    • I would recommend to give the unminified CSS file, since not everyone understand Sass.
    • For the bg-pattern images, I recommend to use CSS background properties, instead of using HTML markup. You can put that background property on the body element.

  That's it! Hopefully this is helpful!

  1
• Account deleted

  Hi,

  I think your solution looks ok, and it's pretty good for the most part, but:

  • The widths you are given, which are the 1440px for desktop and 375px for mobile don't actually mean the way you are handling them, they are actually there to pretty much guide you. Your mobile view literally starts at 1px less than 1440px and I don't think that's good practice.
  • You might also want to clean up your css/scss a bit, there seems to be a lot of repetitions in the code.

  Keep coding👍.

  1

  ---

  

  ZenCode95•110

  @ZenCode95Posted about 3 years ago

  @thulanigamtee yeah to be honest something about this challenge just makes me want to kill myself lol I feel like just giving up or at least trying something else and then see if I have the energy for it again in the future.

  0