Responsive Testimonials Grid Section using HTML and CSS

Community feedback

• 

  leo-hailey•40

  @leo-haileyPosted 8 days ago

  This looks awesome! The code is laid out very well! My only suggestion would be to add a bit more margin around the entire grid section to give it some space from the edge of the screen. Great job!

  0
• 

  lucielub•120

  @LucieLuBPosted 8 days ago

  HTML Structure:

  The structure is clear and semantic, using meaningful class names like card, head, and comment. This makes the code easier to understand and maintain. Alt Attributes:

  Some alt attributes for images are empty (e.g., alt=""). While this is acceptable for decorative images, you should provide descriptive alt text for images that add value or context, like user photos. Class Naming:

  The naming convention for colors in the card class (purple, blue, Darkblue, cream) is inconsistent. For example, "Darkblue" should be "dark-blue" or "darkBlue" to maintain readability and convention. Typography Tags:

  Using <p> for headings like Daniel Clifford or Verified Graduate is not semantically correct. Consider replacing them with <h3> or <h4> for better accessibility and SEO. Inline SVGs:

  The bg-pattern-quotation.svg could be embedded as an inline SVG for better control and scalability without additional HTTP requests. Repetition of Classes:

  The head and descrpt classes are repeated across multiple cards with identical structure. Consider refactoring these into reusable components or templates to reduce redundancy. Accessibility:

  Add ARIA roles or labels if necessary, especially for dynamic or interactive components (e.g., links in the footer). Footer Attribution:

  The footer attribution is a nice touch, but the link for "Coded by De'vante" is empty (href="#"). Replace it with a valid URL or remove the link entirely. Scalability:

  While the layout is functional, consider using CSS Grid or Flexbox for the card container to handle responsiveness effectively. General Improvements:

  Ensure consistency in indentation to improve readability. Minimize hardcoding colors (like "purple" or "blue") directly in class names. Use variables in your CSS for better maintainability. Suggestions for Improvement Add meaningful alt text for user images. Use semantic tags (<h3> or <h4>) instead of <p> for titles like "Daniel Clifford". Refactor repeated HTML structures into reusable components if you're using a templating engine. Improve consistency in class naming and adhere to a convention (e.g., kebab-case or camelCase). Ensure responsiveness by testing the layout on various screen sizes. If targeting accessibility, enhance the experience with ARIA attributes and semantic improvements. Overall, this is a solid implementation with clear structure, but minor improvements in semantics, accessibility, and maintainability would make it even better.

  0