Frontend Mentor - Room Homepage

This is my solution to the Room Homepage challenge on Frontend Mentor. This project helped me improve my front-end development skills by building a realistic, responsive e-commerce homepage.

Table of Contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

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

Screenshots

First Slide

Second Slide

Third Slide

Links

• Solution URL: Frontend Mentor
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• React
• Sass
• CSS Grid and Flexbox
• Mobile-first workflow

What I learned

Throughout this project, I reinforced my understanding of responsive design using CSS Grid and Flexbox. I also improved my skills in implementing interactive components like sliders that work well across devices, ensuring a seamless user experience.

Continued development

For future projects, I plan to further refine my skills in animation for smooth transitions and continue exploring more advanced features of CSS Grid and Flexbox. Additionally, I aim to delve deeper into JavaScript for creating more interactive elements.

Useful resources

• CSS Tricks: A Complete Guide to Grid - This guide helped me understand CSS Grid layout better.
• MDN Web Docs: Flexbox - A great resource for Flexbox basics.
• Flexbox Froggy – An interactive game that helped me practice and understand Flexbox in a fun and engaging way.

Author

• Frontend Mentor - @Marija Zlatkova
• LinkedIn - @Marija Zlatkova