Frontend Mentor - Easybank landing page solution

Live site

This is a solution to the Easybank landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Easybank landing page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

• Mobile
• Desktop
• Active states

Links

• Live site

My process

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• JavaScript

What I learned

I have practice scroll animations with the help of the IntersectionObserver API. It was awesome to realize that the code below can cause a bug if more than one element is observed at the same time

function animateCard(entries, observer) {
	const [entry] = entries;
	if (entry.isIntersecting) {
		entry.target.classList.add("card-observer-animate");
		observer.unobserve(entry.target);
	}
}

If there is more than one element observed at the same time, only the first element will receive the animation, while the other won't. So I concluded that the best thing is to do the following instead:

function animateCard(entries, observer) {
	entries.forEach((entry) => {
		if (entry.isIntersecting) {
			entry.target.classList.add("card-observer-animate");
			observer.unobserve(entry.target);
		}
	});
}

Here, doesn't matter how many elements are observed, all of them will get the animation.

Also, I am very proud because I used the SASS for loop for the first time:

@for $i from 1 through 4 {
  &:nth-child(#{$i}) {
    transform: translateY(50px * $i); 
  }
}

Continued development

I really liked working with the IntersectionObserver API, because it makes it so easy to determine what happens to an element as soon as it comes into the viewport. From now on, whenever I can, I will try to use it in my next projects so that I can practice it even more