Testimonial Grid Section Challenge

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @khuranamanan 👋, good job on completing this challenge! 🎉

  Here are some suggestions you might consider:

  • The container isn't centered correctly. You can use flexbox to center elements. Also, you can remove the margin: 100px auto; in the .main-container selector.

  main {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  

  Links with more information:

  • The Complete Guide to Centering in CSS.
  • A Complete Guide to Flexbox (CSS-Tricks).
  • How TO - Center Elements Vertically (W3Schools).
  • CSS Layout - Horizontal & Vertical Align (W3Schools).

  .

  • The testimonial should be wrapped in an <blockquote> Element.

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  1

  ---

  

  Manan Khurana•40

  @khuranamananPosted about 2 years ago

  @MelvinAguilar Thanks, Melvin, for the feedback.

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @khuranamanan, congratulations on your new solution!

  I’ve some suggestions 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/

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/testimonials-grid-section-vanilla-css-focus-effect-custom-design-e5bIzU3vZN

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0