Frontend Mentor - Easybank landing page solution

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

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Links

• Solution URL: https://www.frontendmentor.io/solutions/enhanced-accessibility-css-grid-and-flexbox-and-parcel-bundler-qnZnwCG8I
• Live Site URL: https://easybank-landing-page-dimolf345.netflify.app

My process

In order to build this project I followed the guid on CSS tricks A step-by-step process for turning designs into code, and indeed it helped me a lot. Moreover, I wanted to focus for the first time my attention on improving web accessibility. I studied both the WCAG tutorials available on the official website and also Used a very pragmatic guide made by Kitty Giraudel. It has been an amazing topic to study.

Built with

• Semantic HTML5 markup with BEM naming convention
• SASS
• Parcel
• Flexbox
• CSS Grid
• Desktop-first workflow

What I learned

I trained my ability to write down by hand all the considerations and notes about the project BEFORE starting to write code. So I first decided what kind of basic approach to start with (desktop first instead of mobile first), considering the design provided. Then I started to take note of how to identify each main element of the page layout, such as the navbar, the three sections, the card containers, the footer, ecc... After having a clear picture of the page layout, I started to write down variables and to evaluate which components of the page could be reusable (such as the "Request Inviste" btn). Once finished the desktop version, I started to shrink down the viewport width in order to understand which breakpoints to implement.

I think I've done a good job, I put a lot of effort in, so please leave me a comment.

Continued development

Next project I will follow again the same process with an harder page, implementing also Third Party Libraries such as Bootstrap. I will also continue to commit myself in order to make my web pages more accessible.

Useful resources

Detailed above

Author

Luca Di Molfetta

• Frontend Mentor - @dimolf345