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.
Note: Delete this note and update the table of contents based on what sections you keep.
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: Add live site URL here
This is the second time I try this Challenge. The first time I tried my usual go to media-query approach were I built the entire website in a mobile media-query; then I build the longer/tablet webiste; and last I build the desktop website. However, the CSS used to make the images move around, grow, and crop, required significantly more time to get right. So this time I built "section by section". I got the intro part (the one with the img magic) first as mobile, then as tablet, and last as desktop. Ignoring the rest of the site until the intro was 90% of the way there and then moved on to the next section and repeating the same steps I took with the previous one. I found this method to be a lot better since it maintained my focus on each section of the website instead of revisiting parts after the fact.
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- Qwik - JS library
- Tailwind - CSS framework
- Flowbite - Tailwind component Library
I learned that the new process I used is cool and that grid is magical.
I'd be interested in seeing a more accurate solution of the odd img manipulation the desing files had. My solution doesn't break the sections because of the W3C (you can't only hide overflow in one axis. If you hide one overflow axis you hide both)
- Frontend Mentor - @TheMcnafaha