Mobile-first Solution using Sass & Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Frances!

  👍 Good job on completing this challenge! Your solution looks good on both portrait and landscape for mobile view 🙌. It's also great that you care about accessibility.

  Some feedback:

  • Use CSS background image instead of HTML img markup.
  • I recommend to use ul for the parent element of each rate item star.
  • The Rated 5 Stars... should not be a heading. I recommend to use strong tag instead.
  • The person name and the verified buyer should be paragraph elements not heading.
  • For the testimonial quote, I recommend to use blockquote for more semantic HTML.
  • I recommend to put your attribution outside the main tag and swap the div with footer tag.
  • I recommend to always set all elements box-sizing: border-box as your common reset. It will make sure that those elements don't add additional size when you add padding.
  • Use rem or sometimes em unit instead of px. Using px will not allow the user to control the size of your page. This is important for accessibility 😉.

  That's it! Hopefully this is helpful!

  Marked as helpful

  2

  ---

  

  Frances•165

  @frances-mPosted about 3 years ago

  Thank you so much, @vanzasetia ! These are such great recommendations, I truly appreciate you taking the time to look through my code! Your explanations of the importance and implementation of your suggestions are so concise and well written, it's impressive!

  I'll get to work on making these changes, thanks again!

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  @frances-m 😉 You're welcome!

  0