All solutions

Wasn't too hard, but the facebook icon is giving me problems, it doesn't look well centred because of the height and width I had to add in to make it look a circle, if I were to remove the 3.8rems of height and width, it wouldn't look like a circle anymore, any ideas on how to fix this ?

Dont know if this was too easy or I have gotten better, feedback for improvement is always welcome.

This was a relatively easy project, any suggestions to improve are welcome.

I learnt a lot while doing this project. No wonder it took me 3 weeks. Specifically, I learnt throttling and debouncing while implementing this project. Specifically, I used throttling to reduce the number of calls when the resize event occurs on the window. Additionally, there was a lot to learn around grid as well.

I have a question:

1. Do you think there is better way to refactor the code to handle window events, I have tried to hack my way around, but I dont think its very clean in the way it approaches it.

Thanks for checking the project out.

This was a relatively simple challenge. Feedback that helps me improve is always appreciated.

I really enjoyed building this one out as this was my first time with both scss and css grids. Anything that helps me improve is a welcome addition.

I struggled a lot while building the nav,specifically the dropdown menu, i had to use position absolute to fix it, otherwise the whole header would expand alongside the menu. I am still not sure whether using an absolute position is the best way to fix it.

In the original requirements screenshot, the menu is slightly left positioned, I think I would have to use relative positioning to do that, but that breaks the whole header, is there a better way to do it ?

Is there a way to stop the background from scrolling while the nav is open on a mobile device, I tried using touch-action:none but it didnt work.

Also, I would appreciate it if any accesibility issues could be highlighted, I tried to fix as many as I could, also used aria-expanded.

Responsiveness took quite a long time to come up with on this one. I am not sure why I need to set main { height: 100%; } inside the media query when I already 100vh, which should occupy the full viewport. Without adding that, the ui on mobile goes for a toss.

I designed this using flexbox, would using grid be a better choice here ? I think I overused flexbox here.

I struggled with the responsiveness on this one, a lot. I think it could be a lot better and would appreciate comments on that. A feq questions I have are :

1. How do I center the entire thing in the center of the page as given in the design ? 2 ) I think the text padding needs to be fixed on mobile.

Is the styling fitting the requirement ? I am a bit unsure.