Testimonial-grid-section using CSS Grid, Sematic HTML5 & Custom CSS

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Sky! 👋

  Good job on this one! 🎉 Your solution responds well and overall looks good. Here's my suggestions:

  • I think in this case position: absolute is a best way to align this quote marks image but you shouldn't put that image into your HTML and instead you should use ::before pseudo-element on .card-one container. Set that pseudo-element to be position: absolute and within your content property add image url - content: url(../images/bg-pattern-quotation.svg);. Then position it with top & right properties.
  • Change the alt attributes for the .profile-img avatars, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies. You can change .profile-name to be your heading <h1-h6> element and it will be enough do describe this card in addition with .profile-position.

  Good luck with that, have fun coding! 💪

  2

  ---

  

  P

  Skyz Walker•1,035

  @Skyz03Posted over 3 years ago

  @tediko Thank you for your feedback again ... Your comments are a great source of learning ... I did try to implement semantic HTML 5 from your last comments and still learning and implementing , also taking notes to apply to next projects. Will update this soon thanks! 😃👍

  0

  

  P

  Skyz Walker•1,035

  @Skyz03Posted over 3 years ago

  @tediko Thanks man updated the solution, learned how :before works now plus also got the idea of the report issue which was to implement h1 - h6 inside the section.

  1

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @Skyz03 Well done! :)

  1
• 

  Deep•235

  @deepchhatraliaPosted over 3 years ago

  You can try using display-flex and then use align items and justify content

  1