Equalizer Landing Page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hello, Esteban!

  Congratulations on completing this challenge! 🎉

  Here are some suggestions for improvements.

  • Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (img) so the screen reader will pronounce it as an image.
  • Alternative text for the logo should be the company name (alt="Equalizer").
  • Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
  • For your information, decorative images are images that don't need to exist on the page. They don't add any information and serve only aesthetic purposes.
  • The download buttons should be anchor tags with download attribute.
  • Wrap each social media icon with an anchor tag. They are social media links of the company.
  • Put the footer outside the main landmark.
  • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. Read more — A Modern CSS Reset
  • Use em unit for media queries. It adapts when the users change their font size setting.
    • @media - CSS: Cascading Style Sheets | MDN #accessibility_concerns
    • PX, EM or REM Media Queries?
  • Avoid using px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.
  • Prefer unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN

  It is important to know that mobile styling should be the base styling. It should not be wrapped with a media query. Now, if the user's browser's window has less than 300px width sees a broken website.

  I hope this helps. Happy coding!

  0

  ---

  

  Esteban•340

  @estebanp2022Posted almost 2 years ago

  @vanzasetia Thank you for taking the time to offer your insight! I was able to revise my code and made a few changes based on your feedback, definitely learned along the way. Thanks again!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @estebanp2022 You are welcome!

  0