Social proof section using html, css, grid and flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋 Hi Martha!

  👍Good job on completing this challenge! This solution looks good on both mobile landscape and portrait mode and so on desktop view too! 👏

  Also, you have done a great job on accessibility part where for decorative images (star icons) you add aria-hidden and leave the alt empty. Well done!👍

  I have some feedbacks on this solution:

  • Wrap the blockquote content with p tag. blockquote element’s content is a quote, not a chunks of characters. Source: HTML best practice github repo
  • You can import the Spartan font family and all the font weights with only one @import.
  • Use rem or sometimes em units for font size. Using px won't allow the users to control the font size based on their needs.
  • Instead of keep setting different width for the main element, I would recommend to set a max-width with rem unit to prevent it from keep getting bigger on bigger screen.
  • For the testimonial card HTML markup, you already have a good markup. But I would prefer to include everything inside the figure element. So, it's up to you, whether you follow the Raymart, me, or leave it as it is.

  <figure>
    <figcaption> (flex)
       <img src="/michael.png" alt="Michael" />
       <div>
          <p>Michael</p>
          <p>Verified</p>
        </div>
    </figcaption>
    <blockquote>
       <p>
          ...quotes
       </p>
    </blockquote>
  </figure>
  

  That's it! Hopefully this is helpful!

  Marked as helpful

  1

  ---

  

  Martha•510

  @Mtc-21Posted about 3 years ago

  @vanzasetia Hi, I really appreciate you sharing your knowledge, apply the suggestions.

  • I usually use rem in the font-size, I don't understand what happened to me.
  • the max-width at the container in rem is great
  • I did not know those uses of the figure tag

  thank you 👍

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great it is responsive and the mobile state looks great as well.

  For your queries:

  1. By default as well, when using display: flex all items inside the row gets the same height since it uses as default align-items: stretch which makes the tallest element, share that height to its siblings. Now on flex-direction: row flex: 1 only makes the element of the flexbox be equal in terms of width and not height. If it is flex-direction: column then it goes to height.
  2. I think the design/layout is already great.

  Some suggestions on the site would be:

  • body does not need flex-direction: column since there is only one direct child it has.
  • I wouldn't really use ul on the stars, instead if I were to do this, I would use the li element's background props and put all those 5 stars in there. By doing that, I avoided creating extra html tags.
  • When wrapping a text-content do not just use strong to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • For each of the testimonial cards, it would be great to use this markup:

  <figure>
    <img src="" alt="">
    <blockquote>
      {qoute in here}
    </blockquote>
    <figcaption>
      person name
      <p>
        person role
      </p>
    </figcaption>
  </figure>
  

  Then you could just use grid to place each item in their own spot.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Martha•510

  @Mtc-21Posted about 3 years ago

  @pikamart Hi, I really appreciate you sharing your knowledge, apply the suggestions.

  • the stars was great, I hadn't thought of that.

  thank you 👍

  1