Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

testimonials-grid-section {HTML/CSS}

Kamilā€¢ 260

@Wuczek

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there šŸ‘‹, Iā€™m Kamil and this is my solution for this challenge. šŸ™‚

šŸ› ļø Built With:

  • vanilla HTML/CSS
  • npm - prettier

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you. šŸ˜ŠāœŒļø

Community feedback

Vanza Setiaā€¢ 27,795

@vanzasetia

Posted

Hello, Kamil! šŸ‘‹

Good alternative text! šŸ‘ You don't include the word "image" or "avatar" in it.

Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, they can get confused.

I don't think the content that is currently being wrapped by <h2> should be heading. I think it should be <p> with bold styling or with <strong> tag.

I recommend wrapping the quote with <blockquote>. So, the <blockquote> would be the parent element of the <p> that wraps the quote.

Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more ā€” Why you should never use px to set font-size in CSS

I hope this helps. Have fun coding! šŸ˜„

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord