Full Responsive Blogr Landing Page Using SASS And Vanilla JS

Hey,

Overall your solution looks really good! Responsiveness seems fine as well! I'm not quite sure about the animations you added to the navbar (for which you should perhaps use <nav> and not a div). They look a bit unnatural as they come down all the way from the top, crossing the cursor. Their origin should be the link you click on. And perhaps you could animate the opacity for them as well :) That's just probably personal taste though.

There are some issues here which are more important:

1. Why did you add aria-hidden to the nav links? You're hiding the whole navigation from screen readers which is probably not something you ever want to do...

2. For the arrow icons you could leave the alt text empty. Aria-hidden would be appropriate here.

3. The navbar links should not just look like links, you should use <a> for them (wrapped in those <li>s).

4. Your hamburger button should be a <button>. You can nest the image inside this (and leave the alt text empty).

5. Your page should have only one <h1> heading. For the rest you can go <h2>, <h3>... in a descending order. Heading levels play a major role in defining your page's outline.

6. Your footer links should also be <a> wrapped in those <li>s.

7. Everything that isn't inside your header or footer should be contained by a <main> landmark.

8. Not sure what a "down" attribute is but it's being picked up by the report as invalid.

9. Don't nest a <button> element inside an <a>. It's either a <button> OR an <a> element.

I hope this helped a bit with the accessibility issues. ^^

1. ✅ Good Looking Design on Desktop 3/3 2 .✅ Good Looking Design on Mobile 3/3
2. ✅ Readable , Structured HTML 4/5
3. ❌ Hamburger Menu should not show on Desktop View
4. ✅ Responsiveness
5. ❌ Overflow on Mobile ( often unavoidable )
6. ✅ Trying A Challenge That is not easy 5 / 5