Responsive Testimonials Using Grid

Community feedback

• 

  py-code314•340

  @py-code314Posted about 1 month ago

  Hello,

  Good job working on the solution 👏🏼. It looks good on both mobile and desktop screen sizes. Kudos for good use of CSS Grid

  As I went through your code I thought I could make some suggestions to improve the code. Here they are:

  HTML:

  1. For .card class you can use <figure> instead of <div> if you wanna use semantic HTML tags. Then you can use <figcaption> for .card__user_profile
  2. You can also wrap testimonial text inside <blockquote> and two <p>s instead of two separate <div>s to make it more accessible
  3. The images are mostly decorative so you can leave 'alt' empty. I believe it's not a good practice to use 'picture' or 'photo' in alt text

  CSS

  1. You can add more custom variables like 'font-size', 'font-weight' and 'spacing' variables in :root if you wish
  2. I suggest to use a global CSS reset either by Andy Bell or Josh Comeau
  3. Around 600 - 800 px screen width some cards have too much gap between second paragraph and bottom border and I guess it's because of min-height you have in .card
  4. Border around images looks a little thicker in design files. You can probably use 2px there

  Don't have too many suggestions 😁 and hopefully these are helpful to you. Wish you all the best!

  0