Testimonials grid section with Tailwindcss

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @emanuel-ra, congratulations on your new solution!

  I’ve some suggestions for you:

  The html structure you’ve used here works, but if you want to make this even better, you can replace the <div> you’ve used to keep the blocks and replace with some better html markup and semantic, for example, the main block can be wrapped with <main> and each testimonial card with <article>, then you can use a tag that not everyone knows, for the paragraph containing the quote you can replace the <p> with <blockquote> that is tag the describe exactly its content.

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

  ✌️ I hope this helps you and happy coding!

  1

  ---

  

  Tomas Emanuel Ramirez Abarca•580

  @emanuel-raPosted about 2 years ago

  @correlucas Thanks!! i'll check the article 😁

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @emanuel-ra, some suggestions to improve you code:

  • The profile images Alt Tags need to be improved. It should state the following; “Headshot of -person’s full name-“

  • You want reduce the padding/margin and font size of your content in mobile view; it is the same from desktop to mobile.

  • I recommend adding a third layout to make the transition from mobile 📱 -> desktop 🖥 views smoother.

  • 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

  Desktop View Code:

  .testimonial-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
        "daniel daniel jonathon kira"
        "jeanette patrick patrick kira";
      gap: 30px;
    }
  
    .daniel-card {
      grid-area: daniel;
    }
    .jonathan-card {
      grid-area: jonathon;
    }
  
    .jeanette-card {
      grid-area: jeanette;
    }
  
    .patrick-card {
      grid-area: patrick;
    }
  
    .kira-card {
      grid-area: kira;
    }
  ``
  
  
  **Happy Coding!** 👻🎃
  

  0