MoreLesson 269Free preview

Testimonials

This lesson is part of How To · All levels

Summary

Testimonials feature user quotes along with names, roles, and photos to build trust. The grid with auto-fit allows the cards to be neatly arranged and adjusted to the width of the screen. Use the blockquote and quote elements to keep the citation structure semantic.

Key points

<blockquote> marks the quote, whereas <cite> mentions the source.
Grid repeat(auto-fit, minmax(...)) makes the card responsive without much media query.
Match the card height with the flex column to align smoothly.
A profile photo requires alt text that describes the person, not just a 'photo'.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.