Testimonials Grid Section Using HTML and CSS

Community feedback

• 

  Danijel•350

  @danijelche

  Posted 11 months ago

  Hello i think you should add one more media query between max width and media(max-width: 600px), something like this @media(max-width: 1024px){ main{ grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, min-content); gap: 4vw; } .fifth { grid-column: 1/4; grid-row: 3; } Cheers!

  10

  Marked as helpful
• 

  Mohammed Ibrahim•640

  @MohammedOnGit

  Posted 11 months ago

  Hello Chimi Rinzin!

  Congratulations on completing the challenge. You did awesome! Your HTML structure looks solid, and it captures the testimonials in a well-organized format. There are, however, a few small improvements you can make to enhance clarity, consistency, and accessibility:

  Recommendations: Alt Text for Images:

  Improve the alt attributes by making them more descriptive. Instead of just "Daniel's Picture," consider a more detailed description like "Portrait of Daniel Clifford, Verified Graduate." Example: <img src="./images/image-daniel.jpg" alt="Portrait of Daniel Clifford, Verified Graduate" />

  Heading Hierarchy:

  Ensure proper heading structure for accessibility and SEO. Each section has an <h1>, but for better hierarchy, consider changing subsequent headings to <h2>. The main page title should use <h1>, and the rest should be <h2> or lower. Example:

  <h2>I received a job offer mid-course, and the subjects I learned...</h2> Consistent Class Names:

  It’s best to maintain a consistent naming convention for your CSS classes. In some sections, you're using "first," "second," etc., which can be a bit unclear. Consider using more descriptive names like "testimonial-daniel," "testimonial-jonathan," and so on. Example:

  <div class="testimonial-daniel"> Font Style Link:

  The font style link for Barlow Semi Condensed is connected correctly, but you could import only the specific weights you're using to reduce page load time if you're not using all weights. Spacing and Alignment:

  Ensure that spacing (margin and padding) between elements is handled in your CSS for consistent alignment across devices. Accessibility:

  For better screen reader support, consider wrapping the entire profile and testimonial content in <article> tags, as each testimonial represents a self-contained piece of content. Example:

  <article> <div class="profile"> <img src="./images/image-daniel.jpg" alt="Portrait of Daniel Clifford, Verified Graduate" /> <div class="names"> <p class="name">Daniel Clifford</p> <p class="verified">Verified Graduate</p> </div> </div> <h2>I received a job offer mid-course...</h2> <p class="quotes">“ I was an EMT for many years before I joined the bootcamp...”</p> </article> Challenge Name in Title:

  The <title> tag currently has a placeholder [Challenge Name Here]. It would be good to replace that with the actual challenge name, such as "Frontend Mentor | Testimonial Grid Challenge."

  Implementing this improves clarity, accessibility, and organization, which will enhance user experience and maintainability.

  00

  Marked as helpful