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

Mobile first, HTML and CSS.

@rcrespoc

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


Feel free to comment. You may have some advice, ty.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Richard,

Well done. Great solution. I commented your solution this morning but I removed my comment by a mistake. Sorry, so here it is again:

I have checked your HTML structure, a few tips for you:

  • I think, you don't need two articles inside of the section (maybe you can treat it as one article?);
  • I'd recommend using the main h1: I know this is a small component but this challenge we can see as one single page. Just to let you know, you should only use one h1 per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense => h1 is the most important heading and tells you what the purpose of the overall page is (generally please read about headings h1-h6). In this case, maybe will be good to create h1 with the class sr-hidden and names it "Testimonials" for the Screen Readers. For the name of person maybe it will be better to use the tag h2 and for the bold text the tag h3 (check it out);
  • please check HTMl issues report above (you can fix it);
  • did you reset the CSS styles?
  • Responsive Web Design: what do you think about ipads and tablets devices - in my opinion, you can go from one column ( mobiles, like you did), then create two pairs with two boxes (2x2) and below will be the 5th box at the bottom along the entire length of the container. Finally, the desktop version => otherwise all content will be too wide on these devices between mobile and desktop;
  • please check your HTML issues report and fix it.

That's it from me. Ps. don't forget to upvote any comments on here that you find helpful.

Greetings :D

2

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