This is a solution to the Room homepage 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
- Navigate the slider using either their mouse/trackpad or keyboard
- Live Site URL: Room Challenge Solution
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Tailwind CSS - For styling
This was a lot of fun! One thing I was particularly worried about was making sure that the arrow buttons in desktop mode would align themselves with the bottom right image perfectly like they do in the design. This took some effort to make fully responsive, as Tailwind doesn't work with dynamic class names, but nothing a little elbow grease and some motivation didn't fix, the resulting code is pretty funny but you can't disagree with the results.
I'm very happy with the way this came out overall.
I want to learn more on flexbox and grid in general. It took me more time than it should have to finally nail down that part of the code.
- Frontend Mentor - @uncoolzero
- Twitter - @uncoolzero