Testimonial Grid Section using HTML & CSS

Community feedback

• 

  geomydas•1,400

  @geomydasPosted 2 months ago

  Hi @Eeshma123, I have finished reading your code, it looks good but I have seen few issues with it

  • Put the images inside a images/ or assets/ folder. Putting them in the home directory is messier and much more unmaintanable
  • No need for the section tag, you can use use div instead for styling but there isnt really a need since this is a CSS grid project
  • Remove the section tags as that messes up the CSS grid as it only has 2 grid items instead of 5.
  • Don't use multiple h1s, you should only have one h1 in your project and the rest should be h2s. This is crucial for both accesibilty and SEO. You shouldn't skip heading levels either so you can add a visually hidden h1
  • Self host google fonts. I use this handy tool to help me host google fonts. Using the link provided by Google Fonts are slower and not GDPR-friendly which is an issue on real projects. Instead, you should self host them using @font-face
  • Never set text related properties in px and always set font size in rem! See here
  • Don't use the element selector for divs unless it is part of a CSS reset which is totally not the case here. You should instead add another class for the cards.
  • Learn about the BEM methodology and see if it helps you write better classnames and more maintanable CSS
  • Use the rem unit in place of px. Most of the time you would use px for very small stuff such as borders, outlines and shadows. You would use rem most of the time anyways. To be specific and more deeper, you should use rem if you want it to scale with the user's set font size which is the case most of the time for a11y
  • Use a div using flex to vertically align the section with the avatar profiles instead of using vertical align
  • Use a css reset. What it does is that it makes your css more consistent across browsers, you dont have to do anything special since you just have to copy and paste the css reset insid your code. I reccomend using Josh Comeau's or Andy Bell's css reset
  • Use a code formatter such a prettier to automatically make your code formatted and more readable rathern than manually indenting it
  • Don't set fixed widths such as width: 550px, in fact this project doesn't even need it as it uses CSS grid

  0