Social proof section using flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this. Layout in desktop looks really nice and the mobile as well. Though the desktop layout screen time could be adjusted on the media query, since right now, the layout goes in mobile at point 1200px which is very far away for intended mobile layout. The desktop layout could use more of those.

  Some other suggestions would be:

  • Do not use / root path in github, it will work on our local machine but on github, it does not. So you background-image in the body tag should have used this:

  background-image: url(./images/bg-pattern-top-desktop.svg), 
                                      url(./images/bg-pattern-bottom-desktop.svg);
  

  It should have been ./ or just simple images without the front path.

  ( It feels nice that you are explaining things in the html )

  • The alt attribute on those stars images should have been left empty like alt="". Since those stars are just decoration, you don't want to put a alt on them, because if a screen reader picks it up, it will read all those 15 stars alt values and will confuse or get a user annoyed. A good rule of thumb, if an image only acts as a decoration, use alt="" on it, but if the image adds content, then use a descriptive alt value.
  • The 3 ratings as well could have been wrapped inside a ul element, since those are list of ratings.
  • When using heading tags, make sure you are not skipping any level. If you use h4 make sure that h1, h2, h3 is present in the webpage.
  • The alt value for each of the person in the testimonial could have used their names as the value, like alt="Colton Smith".
  • I wouldn't use section inside the each of the testimonial cards. I would use section instead to group the whole 3 testimonials cards, because it is testimonial section.

  Other than those, great job.

  Marked as helpful

  0

  ---

  

  Praise Emmanuel•50

  @praisepelumiPosted about 3 years ago

  @pikamart Thank you so much for the detailed response? I really appreciate it!

  0