Submitted over 3 years ago

Room Homepage with Sass, Gridbox & VanillaJS (Mobile First)

Miquel• 275

@mrjayy5

Preview site View code

This is a solution for...

Room homepage

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

I enjoyed working on this project. Feedback is appreciated!

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, wonderful job on this challenge, Miquel! 👍

Your solution looks great and responds really well! (I especially like how it grows to fit the entire area of the viewport even on larger screens—a detail often missed on this challenge.) 🤩

I also like the smooth transition between slides on the page! 😉

Happy coding! 😁

Miquel• 275

@mrjayy5

Posted over 3 years ago

Hi ApplePie, thanks for the feedback!

Made some responsiveness improvements in the code. Also made some UX improvements. It's now possible to break out of the mobile navigation by clicking outside of it.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@mrjayy5

Just checked it out again! Good work! 🙌

Adding that feature to close the mobile menu by tapping outside of it was a nice idea!

Roman Filenko• 3,335

@rfilenko

Posted over 3 years ago

Hey Miguel, great work on this one, clean, nice code and responsive as well. Found few smaller issues:

add some transition for menu links(hover effect, add focus states as well);
hiding overlay by default, adding transition to it on a show;
slider buttons can be buttons;
grid properties can be written with shorthand like grid-template-column: 3/4 or using grid area to make it simpler.

Hope this was helpful. Have a good one, Roman

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord