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.
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
- Navigate the slider using either their mouse/trackpad or keyboard
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- React - JS library
- Next.js - React framework
- React Hotkeys - A React hook for using keyboard shortcuts in components in a declarative way.
- TW-Animated - Extended animation utilities for Tailwind CSS
- Had to build the burger menu from scratch as this one is horizontal...
- Learned to use the React libs to handle keyboard and animations.
Still have been ding to much try_and_error to build the CSS infrastructure with Tailwind.
-
The icons SVG usually included in the challenges do not follow the text color defined in the container where they are. I'v been using the ones there: TW Icons - Icons more Tailwind friendly.
-
Also, the
tag from NextJS, when used with SVGs, pose some difficulties...
- Website - Thomas Tschoepke Soares
- Frontend Mentor - @ttsoares
Several very useful Youtube videos from nice persons helping the IT community...