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: Add solution URL here
- Live Site URL: https://easy-bank-landing-page-next.vercel.app/
- Semantic HTML5 markup
- Tailwind CSS
- CSS Grid
- Mobile-first workflow
- Next.js - React framework
Through this project I learned ;
- How to build a static site with next js
- How to add tailwind to a next js site
- Setting image dimensions reduces the CLS(Cumulative layout Shift) of a page
- How to local images and fonts to next by adding them to the public folder
- Using _document.tsx to set html lang attribute
- How to extend custom styles in tailwind
- How to setup a layout Component for a next js app
- I would like to improve on my usage of typescript
- I would like to set up tests
- Next js Docs - This helped me learn Next js from setup to best practices.
- Tailwind Css Docs - The tailwind docs were very informative and provided great examples which improved my experience.
- Frontend Mentor - @g-nm