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
- Solution URL: https://www.frontendmentor.io/solutions/room-homepage-html-csssass-js-glidejs-XJwTTXuFYj
- Live Site URL: https://p4bloxx.github.io/Room-homepage/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Sass (Preprocessor) for CSS [https://sass-lang.com/]
- SCSS syntax
- SASS variables
- Javascript
- Glide.js for slider component [https://glidejs.com/]
In this challenge I worked on building the layout, encountering some problems along the way, especially when I changed the layout of the various blocks for tablet and desktop viewing. Overall I really enjoyed working with this type of asymmetrical and modern layout and overall I think I arrived at a good result.
I would like to work more on these types of more "complex" layouts than the usual ones encountered so far in the challenges, because they force you to think better about what could be the best choice of arrangement of the various blocks and also the connection between them.
also in this case I used the js library "Glide.js" to implement the photo slider of the hero section. This time I spent more time to make it "work better" from the point of view of layout construction, but overall it turns out to be a valid tool, easy to customize.