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

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 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!

  Marked as helpful

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 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)! 😁

  Marked as helpful

  1

  ---

  

  Simon Hernandez•615

  @simonhernandezPosted almost 4 years ago

  @ApplePieGiraffe

  Hi APG! hope you are doing awesome :)

  I am really glad you liked the animations and the card transitions!

  I will definitely be more carful with accessibility issues in the future! In fact, I started taking a Web Accessibility course, which so far has taught me so much about how important it is to make your site accessible to people with disabilities. It is really interesting and fascinating!

  Thanks again for your feedback! wish you an awesome week :)

  0
• 

  ahmed brhili•15

  @cyberknight4Posted almost 4 years ago

  damn bro ur site is lit keep going

  1

  ---

  

  Simon Hernandez•615

  @simonhernandezPosted almost 4 years ago

  @cyberknight4

  Hey man, thanks a lot! I Really appreciate your comment!

  Hope you have an awesome day!

  0
• 

  Itai•670

  @georitPosted almost 4 years ago

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

  1

  ---

  

  Simon Hernandez•615

  @simonhernandezPosted almost 4 years ago

  @georit

  Thanks a lot Itai, I'm really glad you liked it!

  Happy Sunday and fun coding! :)

  0