Room Homepage Challenge from Fronted Mentor

This is a solution to the Room homepage challenge on Frontend Mentor.

Table of Contents

• The Challenge
• Screenshots
• Link
• My process
• Built with
• What I learned
• Acknowledgments

The Challenge

According to Frontend Mentor:

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

Link

You can visit my solution here.

My Process

I started developing without Mobile First methodology and as soon as I finished my desktop layout I realized I had to refactor my CSS and follow Mobile First methodology because it would have made things easier as this is the first time I use grid.

Built with

I developed this web application using semantic HTML, CSS and JavaScript. I implemented BEM methodology as well as Mobile First.

What I learned

Making layouts with CSS Grid and managing trackpad events.

Acknowledgements

I'd like to thank Freddy Montes for sharing a thread with this challenge and Estefany Aguilar because much of what I've learned in CSS is thanks to her courses in Platzi.