Mobile-first solution using HTML, SCSS (w/ BEM) and Vanilla JS.

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 2 years ago

  Hi, Simon! 👋

  Congratulations on finishing this challenge! 🎉 I hope that you are still online at Frontend Mentor.

  It's great that there's a scrolling animation and in my opinion, it would be better if the users that don't want to see animations can turn off the scrolling animation. You can use prefers-reduced-motion media query to turn off the animation.

  I have some feedback on this solution.

  • Alternative text shouldn't contain any words that are related to the word "image" (e.g. logo).
  • Any interactive elements such as buttons should have an accessible name or label. Otherwise, the screen readers don't know how to pronounce it.
  • Avoid using br elements for presentational purposes. Read the "Accessibility concerns" part of the MDN documentation for br.
  • Wrap the quoted content with p. blockquote element’s content is a quote, not a chunks of characters. Reference: hail2u/html-best-practices #use-appropriate-element-in-blockquote-element
  • Use the em unit for media queries. It adapts when the users change their font size setting. Here are some references.
    • @media - CSS: Cascading Style Sheets | MDN #accessibility_concerns
    • PX, EM or REM Media Queries?
  • Never set font-size on the html element. It will overwrite the user's browser's font size setting.
  • input elements must have a label. I recommend using aria-label to give each of the input an accessible name.

  I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

  • Manuel Matuzović - Lost in Translation - YouTube
  • Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
  • Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

  I hope this helps! Happy coding!

  10

  Marked as helpful
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hey, Simon! 👋

  You've done a great job on this challenge! Your solution looks good and those animations are amazing! I also like the transition of the "+" and "x" buttons of the director cards. 🤩

  Everything scales up/down pretty well! 👏

  I only suggest taking a look at your solution report and trying to clear up some of the errors that are there (adding a <title> tag to the inline SVGs should help clear up a few errors). 😉

  Keep coding (and happy coding, too)! 😁

  11

  Marked as helpful
• 

  ahmed brhili•15

  @cyberknight4

  Posted over 4 years ago

  damn bro ur site is lit keep going

  11
• 

  Itai•670

  @georit

  Posted over 4 years ago

  Great work! I love the on scroll animations. Happy coding 😊

  11