Testimonials Page | Grid & SCSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾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
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  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

  ---

  

  Joshua Hellard•545

  @jhellardPosted about 2 years ago

  @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