Mobile-first Sunnyside landing page

Hey Spencer! Excellent work on this challenge! Your solution looks great when compared to the design and scales up/down nicely 👏

I notice you've got the click event listener for the mobile menu on the hamburger img element. I'd strongly recommend avoiding setting click listeners on non-interactive elements, like the img element. These can't be accessed by anyone not using a mouse/trackpad to navigate the content, which is a bad practice. Instead, add click listeners to interactive elements like a' or button`. This will ensure the element is focusable and accessible by people not using a mouse/trackpad.

For a menu like this, I'd use the button element. If you want to dig deeper into accessibility with mobile menus, I'd recommend looking into aria-expanded and other attributes to aid screen reader users.

Also, try reading out the alt text aloud for your images. At the moment, they don't make much sense or add context to the content. For example, in the section with four images near the bottom, screen readers will read out "milkbottles", "orange", "cone", "sugar cubes" at the moment. This doesn't add any context and would be pretty confusing. I'd say these are decorative images, so either use background-image in your CSS or leave the alt attributes blank, so that screen readers ignore them.

One more thing, you're duplicating your img elements and hiding them based on mobile or desktop. Look into the srcset or the picture element to see how you can create responsive images in your HTML.

I hope those pointers help. Let me know if you have any questions! 🙂

Hello @spencerrunde, your project is actually good. Keep it up. Happy coding.