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 using html and css-grid

@kennyoyaf

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@VCarames

Posted

Hey @kennyoyaf, great job on this project!

Some suggestions to improve you code:

  • To make you CSS roots easier to deal with, you can give them custom names, like, "--background-color:, ""--text-color", etc...

  • To make you content accessible to your users, it is a best to use rem/em instead of px for your CSS property values. For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

Sources:

https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

Happy Coding!

Marked as helpful

0
Lucas 👾 104,420

@correlucas

Posted

👾Hello @kennyoyaf, congratulations on your new solution!

I’ve some suggestions for you:

1.You need to include the title of your PAGE. Do that inserting in the <head> the tag <title><title>Testimonials Section - Front End Mentor</title>

2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

3.You’re in the right track I can see that you’ve used the majority semantic tags possible for this challenge, the only block you’ve missed is the paragraph containing the quote text you can improve the accessibility there using <blockquote> to indicate to screen readers that the content inside that paragraph is a quote.

✌️ I hope this helps you and happy coding!

Marked as helpful

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