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

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.