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 Page | Grid & SCSS

@jhellard

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


Great challenge for Grid, I had little experience with it opposed to Flexbox so this one was a big help getting more familiarized.

Any feedback is always welcomed! 🙏

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hi @jhellard, congrats on completing this challenge!

Great code and great solution! I did this challenge too and know how hard it is to set up this grid layout. I think you've done a really good job building everything! Here are some tips for you:

1.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.

2.The cards are a little bit less rounded try this value instead border-radius: 10px

3.To reduce your CSS file and improve the performance of loading your page you can use a tool called CSS minify that reduces the CSS code by removing the unnecessary characters. You can use a VSCode plugin called minify css or this website tool to reduce your code: https://www.toptal.com/developers/cssminifier

✌️ I hope this helps you and happy coding!

Marked as helpful

0

@VCarames

Posted

Hey @jhellard, great job on this project!

Some suggestions to improve you code:

  1. For accessibility purposes, its better to use rem/em instead of px for your CSS property values.

  2. To make it easier to deal with CSS and have more control over your content, I suggest taking a look at CSS Resets.

It makes it easier to make changes and will ensure that everything will look the same regardless of browser used and don’t have to worry that the browser will be using its own styling.

One important thing about CSS Resets, is that there is no such thing as “one is better than the other.”

CSS Resets are customizable for your preference.

Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

Happy Coding!

0

@jhellard

Posted

@vcarames Thanks for the feedback, I actually have used a reset for this project. It’s just a separate file brought in using SCSS. I mostly used rem units for everything, just a few things I used px to get it very specific. (Just used the snipping tool on windows to get the max-width from the design images)

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