CSS Grid testimonial cards

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

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

  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/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Zdravko•420

  @Zdravko93Posted about 2 years ago

  @correlucas Hello, and first of all, thanks for spending time to review my code/solution to this project. I appreciate your feedback, and will take your suggestions into serious consideration and have that in mind while building my next project. I already dove into html semantics, right after reading your feedback, and I already learned a lot! I will continue improving. Thanks again!

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @Zdravko93, some suggestions to improve you code:

  • The headings are being use incorrectly. For this challenge, each heading is equally as important. So best option, is to use <h2> Heading, because it will give each card the same level of importance and it's reusable.

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