Testimonials grid section using CSS Grid

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To center you content to your page, add the following to your Body Element:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  • The text has to be aligned to the left not centered.

  • Profile images should never have the words "images" or " photo" in their alt tag.

  • To enhance the semantics of your component, you want to wrap each individual testimonial component in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.

  Code:

  <figure>
     <figcaption></figcaption>
     <blockquote></blockquote>
  </figure>
  

  More Info:

  ARTICLE

  • Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout and give you full control of it.

  Here is how it looks like fully implemented: EXAMPLE

  • You are using fixed properties for you content, you want to instead use responsive properties to make your content fully responsive to multiple screen sizes not just two.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  cdr-in•90

  @cdr-inPosted about 2 years ago

  @vcarames Thanks for the advices!

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @cdr-in, 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:

  Something you can do is to improve your html markup using meaningful tags and replacing the divs. In this case, for example the main block/div that takes all the content can be wrapped with <main> or section, if you think about = the cards you can replace the <div> that’s wrapping 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 inside bigger blocks wrapped with some better markup.

  Here's a complete guide for HTML semantic TAGS: https://www.w3schools.com/TAgs/default.asp

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  cdr-in•90

  @cdr-inPosted about 2 years ago

  @correlucas Hello! Thank you very much for your feedback, that is actually a very good remark! I did actually learn to do this, but I guess my brain just froze and I completely forgot about those. Thank you again for your feedback, will check that guide too!

  0