Social proof section using semantic HTML and Sass

Community feedback

• 

  T

  Grace•31,550

  @grace-snowPosted over 3 years ago

  Hi

  This looks great for such an early challenge. I would try to fix the alignment to match the design on desktop to make it look more polished/finished. See how everything aligns at the top and on both sides in the design? Designers are insistent with details like that as it's a core principle of good design ☺

  In the html

  • if you use section, you have to include a heading. On this design it would need to be a screenreader only one. But as all content on this is related, I'm not sure 2 sections are necessary
  • remember uls are block elements already. Only wrap in an extra div if you need to
  • if multiple footers are used on a page, they all need aria-labels (even if used within an article/blockquote) I would probably advise wrapping the quote in a figure and using figcaption instead for the author info, or making that author info into a heading above the quote... Bottom line is there is no fully accepted standard for this type of content but figure > blockquote + figcaption seems to most widely accepted as correct these days

  I hope that helps

  Marked as helpful

  0

  ---

  

  T

  Grace•31,550

  @grace-snowPosted over 3 years ago

  With scss, the resulting scss you get should not be any more nested than you would have written anyway.

  If you want to nest selector names, use the ampersand so selectors don't nest.

  Example

  .card {
    ...
  
    &__title {
    ... 
    } 
  
    &__content {
    ... 
    } 
  } 
  
  // outputs to 3 in nested selectors
  .card {} 
  .card__title {} 
  .card__content {} 
  

  This is how I wrote scss for years. But since moving jobs I have accepted my new workplaces scss standards and advise following that instead now.

  The new standard I follow is to only nest things that depend on the parent, like states, pseudo elements, modifiers and media queries. This has a little more typing in scss but makes it way easier to read as each block and element is already encapsulated, and makes it easy to search for classes / do find and replace.

  Example 2:

  .card {
    ... 
  
       // mixin for media queries
      @include media-up(md) {
           ... 
      } 
  }
  
  .card__title {
      ... 
  } 
  
  .card__content {
      ... 
  } 
  
  .card__link {
      ... 
  
      &:hover {
          ... 
      } 
  } 
  
  

  As you can see in example 2, it's a bit clearer to read what the selector is doing and what the output css would be. I rarely nest selectors, except for very specific circumstances, but whenever that happens it needs to be intentional. You should always end up with output css exactly as you expected it to be.

  Good luck learning it ☺

  1

  

  Riyana Gueco•495

  @rnguecoPosted over 3 years ago

  @grace-snow Thank you that makes much more sense!

  I usually would do it this way in plain CSS, but I was sort of fumbling with Sass and whether or not I should nest my selectors. This makes things a bit clearer for me, especially for bigger projects.

  As for the <figure>, I had planned to do that but I read about the <blockquote> > <footer> format on a forum which I admit was a little outdated. Thanks for help!

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  ⭐⭐⭐⭐⭐ Look really nice... Great Job!!

  1

  ---

  

  Riyana Gueco•495

  @rnguecoPosted over 3 years ago

  @palgramming Thank you Patrick! 🙌

  0
• 

  Anurag Singh•1,265

  @exist08Posted over 3 years ago

  perfect

  1

  ---

  

  Riyana Gueco•495

  @rnguecoPosted over 3 years ago

  @exist08 Thank you Anurag! 🙌

  0