Helloπ!
It seemed to be very easy challenge at first sight but it took me some time to properly align mockups background-image with ilustrations images to look good across different resolutions. In addition, I created a carousel from scratch, which also consumed a lot of time. I will not say that I am satisfied with how long it took me to complete this project and the end result, but I want to move on to the next challenge. List of things I learned or used creating this project:
- Added
counter()
function for my pseudo-elements content in about__features. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Watch video(1). Read More(2)
- Used
inset
CSS property to position some of my pseudo-elements. It is a shorthand that corresponds to the top, right, bottom, and left properties. It has the same multi-value syntax of the margin shorthand.
- For hover effect on navigation links I used
mask-image
property. A mask in CSS hides part of the element is applied to. Read More
- 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.
- 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.
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.
No specific questions here but any additional feedback or a criticism will be appreciated! π
Thanks! π