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.
A static landing page with simple animations
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
- Solution URL: Easybank landing page Solution
- Live Site URL: Easybank landing page Live Preview
First, I analyzed both the desktop and mobile design to identify the general structure of the HTML code, which elements to use and which sections will make up the final UI. Some elements are specific for one of the two designs and therefore are hidden by default or will be hidden when a certain breakpoint is reached. Using BEM naming convention for naming classes on sections and components. SCSS partials helped breakdown making styling every component easier than stacking them up in a huge CSS file. Lastly, I used JS to toggle the navigation menu and prevent window scrolling on mobile view and to toggle the desktop background image and navbar elements on desktop view.
========= Update =========
I have recently went through the code again & I realized that I should not implement a CSS feature (media queries) using JS, I also added animations for the navigation menu & services & articles section on scroll (using the InterSectionObserver API)
- Semantic HTML5 markup
- SCSS
- Flexbox
- CSS Grid
- BEM Methodology
- Mobile-first workflow
- JavaScript
I learned more about the SCSS folder structure. Also this was my first time using ES6 modules to break down my JavaScript code into more manageable files.
========= Update =========
I refactored the JS code & used the the InterSectionObserver API to implement simple animations on scroll
- Frontend Mentor - @constantcode9909
- My Website - MohamedAmineBasdouri