Responsive SPA using sass, css flexbox and mobile first workflow

Community feedback

• 

  stenito•80

  @stenitoPosted over 2 years ago

  Hi there! Nice work! I hope my feedback can help you :)

  • Alt attribute on images

  If an image is not part of the content, but rather a design element, you can add an empty alt tag to the element: <img src="./images/..." alt ="">. That is accepted if you check accessibility.

  • Media queries

  When I write simple CSS, even with SASS, like this exercise, I just create one media query and add all changes to that media query. When I work on something more complex, I usually use @include media in SASS. I end up with a lot of media queries that are not grouped. It is said to be more overhead for the browser than grouping the media queries, but I have not noticed any significant difference on rendering time. I prefer the ease of development when the media queries are in the rule :)

  Marked as helpful

  1

  ---

  

  P

  Layne Taylor•140

  @laynetPosted over 2 years ago

  @stenito thank you!! I've updated my code based on all the feedback i've gotten here and on slack and am re-submitting my solution. I will definitely look into @include media for the next FEM project i'm doing which has a tablet design. much appreciated!!

  0
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="main"> instead of <div class="main">.
  • You should add a alt text to your img tag to aid screen-readers

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  Marked as helpful

  1

  ---

  

  P

  Layne Taylor•140

  @laynetPosted over 2 years ago

  @Samadeen thanks so much, I've made some changes based on your feedback and re-deployed!!

  0