Sunnyside landing page using HTML, Vanilla CSS, and Vanilla JS

Community feedback

• 

  Zineb Boutaa•750

  @zineb-BouPosted about 3 years ago

  Hi Adrian,

  I am dropping some notes that will help you to improve your solution 😉

  • You can structure your page better than what you already did, instead of setting the <nav />, then the rest of the content inside the main, you can make a <header / > that will take the top content(nav, title, and the arrow ), the rest will be inside the <main />. This way you will avoid setting the <nav /> position: absolute , always avoid setting important page element as a position: absolute, because it will be removed from the general flow,

  • Add aria-hidden=true to the logo <img />, you are already using alt to describe the image, so we don't want the screen reader to read the image source path.

  • I think the arrow image in the middle of the page is not only for decoration purpos, actually it's a button that will allow the user to skip the content directly to the bottom so here is how you can make an accessible arrow button

  <button aria-label="skip to the bottom">
  <img
  src="./images/icon-arrow-down.svg"
  alt="arrow-down-icon"
  id="arrow-down"
  aria-hidden="true"/>
  <button>
  

  • You totally forget to adapt the layout for the tablet screens, you are only targeting screens< 375px and desktop, making your layout look good on different screen sizes it's so important.
  • Repeating the parent element every time you select a child or using the id as a selector, are not effective ways for targeting elements in CSS, take a look at some naming conventions like BEM, which will help you to figure a better way to name your CSS elements.
  • Concerning social media icons you are only putting them without giving any meaning, it will be hard for anyone who is using a screen reader to navigate on the page, every icon should be put inside an <a/> then give it an aria-label=" link to our Facebook page" (for instance) after that hide the icon since it's only for decoration purpose.

  Marked as helpful

  1

  ---

  

  AdrianH•190

  @Adrian-pyPosted about 3 years ago

  @zineb-Bou Thank you so much for the feedback, I'll practice more and implement the things you mentioned in my future projects. Thank you very much :D

  0