Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Easybank landing page using Sass, BEM and some GSAP animations

ZaraAg• 145

@zaraag92

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Update for solution. Thanks @pikamart.

I added some hover effect on article cards, hope you will like it. Also added minor GSAP animation, just for my practice.

I tried to make the whole site editable, e.g. if you add long text text to article section, it will truncate text to 237 words.

Any feedback will be appreciated. Thanks.

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted

Hey, great work on this one. I like that animation on the hero section. Okay, for the desktop layout it is good, resizes fine although the hero-image gets hidden. The mobile layout is good.

Some suggestions would be:

  • The website logo in the header, the a tag should use aria-label="homepage" so that when users navigate in that link, assistive tech will anounce the phrase homepage link`, this will inform the user that this is a homepage link.
  • The website logo, the img should use alt="easybank" as the attribute. Avoid adding words that relates to "graphic" like "logo, image, icon.." as a value on alt.
  • Navbar links is not showing.
  • The hero background is not appearing, change the ::before background value with this background: url(../img/bg-intro-desktop.svg) no-repeat;.
  • Adding alt on the hero image is nice, but I think phone alone is not descriptive, maybe alt="easybank phone app".
  • alt on the icons in the why choose easybank section could be left empty since those are just decoration.
  • On the article section, since you are adding like a cursor: pointer to the article itself and treating it as an interactive element, what would make it better is to wrap the whole article inside a tag. This way, the interaction that you add makes more sense. Because if you add an animation interaction to an element that doesn't do anything, what good would it add, right? But I like the hover effect:>
  • On the article the title of the article should be a heading tag, if the article is wrapped in the a tag.
  • On the footer, website logo a tag should use aria-label="homepage" as well.
  • The svg of the website logo in the footer should have a title element inside it with a text:
<title> easybank </title>

This is like a alt but for svg's.

  • The six links in the footer should be wrapped inside a nav since those are navigation links like the ones on the header element.

  • On mobile layout, the hamburger menu should use button instead of div, this will make it accessible. Also include a aria-label="hamburger dropdown toggler" on it. Also add a aria-expanded attribute with it, you should use javascript to toggle the aria-expanded attribute to either true or false. This will inform a user that a dropdown has been expanded.

Aside from those, really great work.

Marked as helpful

0

ZaraAg• 145

@zaraag92

Posted

@pikamart thanks so much your feedback.

I fixed all the problems and going to update them. Really appreciate your time and all the suggestions, it really helped me.

1
Kelvin• 915

@Kl3va

Posted

Looks great. But your navigation menu isn't visible on desktop except I move to mobile and come back to desktop.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord