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 BEM naming convention

Tazzz 60

@ta-zzz

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


Hello everyone :>

Here I tried using the BEM naming convention for the first time. So I'm not so sure if I did it correctly. Feedback is highly appreciated!

What I used:

  • Semantic HTML
  • CSS Grid
  • CSS Flexbox
  • BEM Naming Convention
  • Responsive design

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Ta-zzz,

Well done with RWD :D

A few tips below:

  • check HTML issues in a report above and try to fix it;
  • instead of section class="card-cntnr" just use the main tag;
  • alt text: picture of daniel clifford => don't need to use words like picture, image, photo, icons in the alt text as it's already announced as being an image. You can just simply type a name of this person, for example: alt="Daniel";
  • for the text Verified Graduate don't need to use the h2 tag, instead of it just use the p tag;
  • also, this is a single page component so the h1 can use with the class sr-only set to hidden visible only for the Screen Readers (we have to use headings gradually and do not skip them => outline algorithm);
  • don't need to use the h3 tag, instead of it just the p will be ok => bold text doesn't have to indicate on heading;
  • check the design pattern: the quote pattern in the 1 box should be under the text;
  • I don't know why you have used width / height auto => also, add max-width to the container.

Keep coding :D

Ps. Please, don't forget to upvote any comments on here that you find helpful.

Greetings :D

1

Tazzz 60

@ta-zzz

Posted

@SzymonRojek Hello again! Thanks again for the feedback. I actually updated my code using your advice :D . I'm not sure if it is the best way but the width / height auto is so that the container resizes as the screen gets smaller, as a 100% width / height will overflow.

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