Used Flex and Grid - Testimonials grid section

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @joehaddad1000, congratulations on your new solution!

  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.Your html is working but you can improve it using meaningful tags and replace the divs, for example the main div that takes all the content can be wrapped with <main> or section, about the cards you can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Note that <div> is only a block element without meaning, prefer to use it for small blocks of content.

  This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

  2.IMPROVE YOUR WORKFLOW using VSCODE you can code your whole page using px and then in the end use a plugin called px to rem here's the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  Hey @joehaddad1000, great job on this project!

  Some suggestions to improve you code:

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

  • For each individual quote, it's semantically better to wrap them a <blockquote> element. The <blockquote> HTML element indicates that the enclosed text is an extended quotation.

  More info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

  Happy Coding!

  Marked as helpful

  0