This looks great, and it's nice and responsive at various screen-sizes.
For the markup there's just a few things that might be worth looking at.
The top level <article> is probably unnecessary, you could move its styles onto <main>.
Each individual testimonial should have a header for easier navigation through the page. The highlighted text would work well as that and could be <h2> elements instead of <p>.
I see you have a hidden <h1> so that preserves the heading hierarchy. If this was a real page, and not just a subset of the page, then that <h1> would be visible on the page somewhere so that's fine I think.
The alt texts for the images should not include the word "picture" or other similar words like "image" as a screen-reader will read out that the element is an image, so it is redundant.
The body font-size seems really small on my screen, and I'm guessing that was specified in the design. But I would be very careful with font-sizes anything less than 1rem=16px as they can be very hard to read.
The colors of some of the text against the background are too low in contrast as well. You can use Lighthouse to check these and then adjust the lightness of either the background or the font color to compensate. If you create CSS Custom Properties for your colors then that will make it easier to change them in one place
In general this looks great though.
Marked as helpful
@anar-sol
Posted
Hello @AlexKMarshall. Thank you for your comment, especially concerning the alt texts and typography, I will make more effort on accessibility and test my work with a screen reader.
If we think of this testimonials as an independent section in a page, is <article> an appropriate element to contains it? This is what I deduced from this article: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
I wanted to make the highlighted texts as h2 headers, but I ended up choosing the user name. I don't really know which of them is the more appropriate in this context.
