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
  • Link
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Link

• Live site URL: https://anacarol2001.github.io/EasyBankLandingPage/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vite - Frontend tooling
• React - JS library
• Styled Components - For styles
• Framer Motion - For animations

What I learned

Developing this static website, I put into practice the basic concepts of React, such as the JSX syntax, nested components, build-in/custom hooks, displaying data, conditional rendering, and handling events. I also refactor this project, taking into consideration the composition pattern.

It also was an opportunity to learn new techs: the Styled Components for styling and Framer Motion for animations. Due to my good understanding of CSS, it was relativity quick and easy to learn the basics and apply these tools.

Continued development

In the future, I plan to learn and use more complex React concepts, like fetching data from an API and updating the UI or even trying React Router. Moreover, I plan to learn more about Framer Motion to build complex animations and try some CSS frameworks like Tailwind CSS.

Useful resources

• React Js — 8 best practices + Folder Structure - Helped me structure this project.

• How To Create Absolute Imports In Vite React App: A step-by-step Guide - Learn a better way to import.

• How to implement useMediaQuery hook in React - learn how to implement a custom hook for media query.

• Animate Styled Components with Framer Motion! - This article helped understand how to connect Framer Motion components with Styled Components.

• Framer Motion Documentation Examples - Inspiration animations.

• Fun ways to animate CSS gradients - Cool video to learn how to animate gradients with CSS, helped me with the hover effect in the call to action button.

• SVGR Playground - Tool to easily transform a SVG into React Component.

• Easing functions - Examples

Author

• Frontend Mentor - AnaCarolina