Hello👋!
That was a relatively simple challenge but still there was a room to try some new things and learn new approaches. The hardest thing to do was setting these mockups backgrounds and to fit it with design. List of things I learned or used creating this project:
- Added touch-enabled mobile navigation. It's hard to reach for the hamburger menu on larger phones so I added a menu that is enabled by touchmove feature. Swipe from left to right to open menu on mobiles. Read more about touch-events.
- Implemented Skip to content link. Skip links are little internal navigation links that help users move around a page. It is used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first. Read more about skip-to-content links.
- Applied load events to prevent animating content before assets has downloaded. In short it is using JavaScript to listen for a load event, and make use
animation-play-state to pause our animations until the assets has downloaded. This one I found in Anna solution, so special thanks to her. Read more about load-events
- Instead of repeat code for reusable elements i write some helper classes to reuse them throughout the project. I created classes for headings, paragraphs, container. This saves time as well as unnecessary code repetition. I will definitely try to improve in this aspect.
- Added sticky nav menu using
Intersection Observer API. In short, this API is a native way of detecting if an object has entered the viewport. My observer looking at .kv section, and if that section is no longer interacting with viewport it triggers my header to appear. Read more about Intersection Observer.
- I used Sass at-rules
@for which is a simple for loop to transition my header__nav-item's while my mobile menu is open. Read more about @for
You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.
I think I need to work more on my BEM and also Sass. I should nest more instead of adding classes for every element. I know I am writing too much code and can be optimized further. No specific questions here but any additional feedback will be appreciated!
Thanks! 😁
