-
Notifications
You must be signed in to change notification settings - Fork 0
Easybank Landing Page
Esther Marie Reis edited this page Sep 14, 2022
·
5 revisions
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.
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
- Semantic HTML5 markup
- Accessibility:
- Keyboard test
- Screen reader
- Testing tools: axe DevTools, Wave, pa11y
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Styled Components - For styles
This project has a lot of images, and it was very challenging to use the Image component from Next.js
. I learned how to use the layout
prop from next/image and how to Optimize Largest Contentful Paint of the banner image to improve the performance of the landing page. These for sure were great lessons to start learning more about performance.
- Fix color contrast problems.
- Add transition to header menu button.
- Refactor code to make it more understandable.
- Frontend Mentor - @EstherMarie
I would like to thank every happy person who helped me with suggestions, links and examples! 😄