Social Proof Section ~ FlexBox | Responsive Design

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hi,

  you did a good job building semantic and accessible HTML.

  Regarding the rating stars, I think the only way to avoid repetition is to merge the SVG images into one image. However, you could also do something like the following:

  // HTML
  <div class="rated review">
    <span class="star-icon"></span>
    <span class="star-icon"></span>
    <span class="star-icon"></span>
    <span class="star-icon"></span>
    <span class="star-icon"></span>
  </div>
  
  // CSS
  .star-icon {
    width: 17px;
    height: 16px;
    background: transparent url("../images/icon-star.svg") center no-repeat;
  }
  

  According to MDN, the <section> element should usually contain a heading to indicate the content's purpose for SEO and assistive technologies. For the testamonials section I would consider replacing <section> with <div>, or alternatively adding a visually hidden <h2> element as a direct child of <section>.

  Besides that, your code is well structured. Keep it up!

  Marked as helpful

  0
• 

  Suleman Tasawar•380

  @Suleman-TasawarPosted about 2 years ago

  As far as i know that the Section tag is used when there is content that you want to show by order like for example consider a book it has headings,paragraph,diagrams Its default property is block

  section{ display block; }

  while the div tag does'nt have any special purpose you can put any content inside it.Consider you testamonial solution.You can use two parent div containers.One for the upper textual content and Another for the testamonial.

  <div> has default property display block;

  while the blockquote tag is used to reference a section quoted from another Page or Site

  <blockquote cite="www.frontendmentor.io/"> FrontendMentor:A Frontend Portal to practice Webdesigning </blockquote>

  Does this help you in any way

  1

  ---

  

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  @Suleman-Tasawar That's actually not true, the <blockquote> element is used for quotes of any kind (book, speech, comment etc.). Also, there are two types of citie, attribute and element, which are both optional.

  0

  

  Suleman Tasawar•380

  @Suleman-TasawarPosted about 2 years ago

  @dusan-b Thanks for correcting me

  0
• 

  Cornflakes•290

  @CornflakesPlusPosted about 2 years ago

  I would appreciate it if someone can give some feedback on my HTML Semantics as well, like the use of <section> tags, <div> tags, and the use of HTML for testimonials. I used <blockquote> tags with headers.

  0