SCSS, grid, flexbox layout and JS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Ali! 👋

  Nice work on this challenge! 👍 It's great that you've created a hamburger menu for small screen sizes which makes it looks cleaner than the original design in my opinion. However, I would recommend using button element for the button of the hamburger menu. Currently, it's not accessible by keyboard and screen readers because of the div element.

  Other feedback.

  • Wrap the email input and the submit button with form element. They should live inside the form element.
  • If the image has aria-hidden="true" attribute, it's recommended to leave the alt empty. The purpose of aria-hidden="true" is to hide the image from the VoiceOver screen reader because it's a bug where it still pronounces the empty alt images when it shouldn't. So, if it's a decorative images then leave the alt empty and add aria-hidden="true" to hide it from the VoiceOver screen reader.
  • Good job on using aria-label on the social media links! 👏
  • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

  I hope this helps! Keep up the good work! 👍

  P.S. I would recommend removing the #solid-js tag because the site is not built with SolidJS

  Marked as helpful

  1

  ---

  

  Ali Ahmed•680

  @Dany-GitHubPosted over 2 years ago

  @vanzasetia Thanks you so much , i will focus more on the future about accesibilty

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Wa7dany You're welcome! 👍

  I've some great resources to learn about web accessibility.

  • Inclusive Components - learn how to create an accessible components (toggle buttons, a todo list, etc).
  • Deque - List of axe 4.4 Rules - great for manual accessibility checks.
    • Blog Post by Adrian Roselli - Stop Giving Control Hints to Screen Readers
  • Scott O'Hara - Blog Posts
  • Andy Bell - Piccalilli
  • Stephanie Eckles - moderncss.dev - I like the Modern CSS Upgrades To Improve Accessibility blog post. It tells you a practical guide to improve your website accessibility.
  • Checklist - The A11y Project - make sure that your webisite is accessible.
  • WAVE Web Accessibility Evaluation Tool

  Marked as helpful

  1

  

  Ali Ahmed•680

  @Dany-GitHubPosted over 2 years ago

  @vanzasetia Thanks so much , do you have good source to learn UI / UX i want to improve the designs i make , thank you

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Wa7dany You're welcome! I personally don't learn about design because I want to just focus as a developer. However, it seems like the "Refactoring UI" book by Adam Wathan & Steve Schoger is a good book to learn about web design (for developers). I never buy (and read it) so I don't know what makes it good. So, if you plan to buy it, I recommend doing some research about it first (don't just take my words).

  1

  

  Ali Ahmed•680

  @Dany-GitHubPosted over 2 years ago

  @vanzasetia Thank you 👌

  0