HTML & CSS (flexbox)

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Ryan!

  I would do the following for HTML markup for each testimonial:

  <div>
    <figure>
      <img>
      <figcaption>
         <p>Colton Smith</p>
         <p>Verified Buyer</p>
      </figcaption>
    </figure>
    <blockquote>
      <p>[testimonial]</p>
    </blockquote>
  </div>
  

  In my solution, I wrapped each card of the testimonial with a <li>. Now, I think the content does not need to be rendered or pronounced as a list item.

  Also, it is not necessary to wrap the profile of the buyer with <figure>. So, it is up to you to use <div> or <figure> with <figcaption>.

  <p> element should wrap the text inside the <blockquote>. Reference: hail2u/html-best-practices: For writing maintainable and scalable HTML documents #use-appropriate-element-in-blockquote-element

  My solution for this challenge — Social Proof Section HMTL5 CSS3 Sass coding challenge solution

  It is an old solution so what I did might not be correct. 😅

  Here are some more suggestions for improvements.

  • The alternative text of each photo does not need to contain "A photograph of". The semantic meaning of the <img> element is enough to tell people that it is an image or photo.
  • Alternative text for the photo should only be the name of the person (alt="Colton Smith").

  Next time, try writing the styling with a mobile-first approach. So, you start by opening the developer tool and resizing the viewport to 320px. Then, start writing your styling. After that, use min-width media queries if you need to adjust the content or the layout.

  The mobile-first approach often results in smaller CSS. As a result, the website loads faster.

  I hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  P

  Ryan Hemrick•290

  @Ryan-HemrickPosted almost 2 years ago

  @vanzasetia I really like this recommendation! Thank you for all of this information. I was just about to ask about the benefits of the mobile-first approach. Historically, I've always done desktop-first because I found it easier to get all of my elements behaving how I want.

  I will go with a mobile-first approach for my next few projects and see how it goes!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @Ryan-Hemrick You are welcome!

  1
• 

  P

  Ryan Hemrick•290

  @Ryan-HemrickPosted almost 2 years ago

  Based on the validation report, it looks like my use of:

  <blockquote class="social__testimonial">
      <cite class="social__testimonial__author">
          <img src="images/image-colton.jpg" alt="A photograph of Colton Smith" class="testimonial__author__img">
          <p class="author__info">Colton Smith<span class="author__info__tag">Verified Buyer</span></p>
      </cite>
  
     <p class="social__testimonial__quote">"We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent!"</p>
  
   </blockquote>
  

  did NOT pass the HTML validation test.. I refactored my testimonials to use the figure element instead, with nested figcaption and blockquote elements. Still not sure if this is the best way to do this

  0