Responsive Multi-Page Website with Grid and Flexbox

Hello Everyone! 👋

This is my 30th solution on Frontend Mentor! Also, it's my first Advanced challenge. This was a large project and fun project. I learned a lot of new things. 😎

I learned how to create an accessible hamburger menu. It required me to use an inert attribute. inert is an HTML attribute that prevents users from interacting with the interactive elements. Currently, it has 82.97% support by the time I finish this challenge. But, I still need to use a polyfill for browsers that don't support inert attribute.

Progressive enhancement was also something that I apply when I did the challenge. Usually, when the users disable JavaScript, I will hide all the page content and tell them to turn on JavaScript. Now, I make it possible to interact with the site content without JavaScript. 🙌

Now for the questions:

• Is the menu accessible with your screen reader? I have checked it with Narrator and TalkBack. It seems like everything is fine. But, I am not sure so I recommend trying it yourself with your screen reader.
• I tested the form on the contact page with TalkBack. It turned out that TalkBack pronounce the input by reading the label and the placeholder of the input. For example, TalkBack pronounces the input name as "Edit box, name, name.". Narrator only read the label of the input (expected behavior). So, is that okay?

This is a large project. I might miss something or do things in bad practice. So, if you notice something wrong or there are things that I could have done better, please do let me know. 🙂

Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

Thanks!

P.S. I wrote everything that I learned on the README.md. You should check it out to see some of my approaches to solving the tricky parts of the challenge. 😉