HTML, Sass and JS built with a small @keyframe animation on hero image

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Nice work on this challenge, Anneta! Here are some pointers after taking a look at your code:

  • Your Sass code looks fine. I'd recommend reading up on the 7:1 pattern as it can be a great way to structure your Sass code. Here's a great Medium article about the 7:1 pattern.
  • I'd recommend reviewing your breakpoints one more time. Specifically at the large phone/small tablet size. For example, if you put your screen size to 600px on your solution you'll see that there's a horizontal scroll.
  • I'd recommend avoiding using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
  • As far as the duplicated code goes you might find it useful to try using min-width media queries instead of max-width. It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

  I hope this helps. Keep up the great work and let me know if you have any questions 👍

  2

  ---

  

  Anneta Wamono•60

  @annetawamonoPosted over 4 years ago

  @mattstuddert Thanks so much for all the feedback:) I've never tried a mobile-first approach, so thank you for bringing this to my attention.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @annetawamono no problem! Mobile-first is great. It can take a little bit of getting used to it. So I'd recommend trying to build 2 or 3 projects with that workflow to really evaluate it.

  0