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

Responsive Testimonials Grid Section using CSS Grid

Anton 190

@septober92

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


I had SO much fun doing this challenge! Any feedback is appreciated! Happy Coding 💻❤️

Community feedback

Joanna 370

@JoannaLapa

Posted

Hi Anton!

My congratulations on finishing the project! Personally, I had also good feelings about this challenge. I noticed that your project is responsive on all devices also tablet - the layout looks good. I see that you took care of such details as a border on pictures and box-shadow on each article.

Some improvements which I can recommend to you are connected with semantic issues.

I see that you use span for: <span class="customer-name">Daniel Clifford</span> <span class="customer-state">Verified Graduate</span>

In my opinion this is better to use here the tag <h2> or <p> for the "customer-name" and <p> for the "customer-state". I personally used <h2> for the "customer-name" in my project, but I see that you used in same section <h1> lower so (If I am not wrong) using <h2> before <h1> would be recognized as a mistake.

The reason that I recommend you to replace <span> is that span has no semantic meaning and we should use it only when nothing other is possible. It is perfectly explained on mdn documentation "The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element."

You can also consider replacing <div> tag with <article> tag for:

<div class="testimonial review-1"> etc. <article> is a correct usage for an user-comment [here on mdn more about <article>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article).

I also recommend you the video of Kevin Powell who made this project and published the video focusing on grid conception, you can compare your version and maybe you'll learn something new: Kevin Powell's solution on GitHub Kevin Powell's solution with an explanation on youtube

I hope that you will find my feedback helpful, Happy coding! Joanna

0

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