Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Room homepage with SwiperJS and TailwindCSS

@jomefavourite

Desktop design screenshot for the Room homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I really struggled to make it look nice on all views, but I couldn't. So I'll really like feedbacks or to see a very good solution.

Thanks

Community feedback

Web Frog 1,840

@MasterDev333

Posted

Great work! Your solution is really crisp. Everything is great and smooth. It would be great if you add transition to shop now button. Look forward to seeing other solutions from you. Happy coding~ :)

1

@jomefavourite

Posted

Thank you very much @MasterDev333

0
Abhik 4,840

@abhik-b

Posted

Hi Jomefavourite , your solution is amazing. The carousel is smooth, and your site is overall responsive which is great.

You can also add cursor : pointer to the links on navbar.

Very good job on this challenge, Keep it up 💯

1

@jomefavourite

Posted

Thanks man, I noticed your YT channel, your tutorials are good👍@abhik-b

1
Abhik 4,840

@abhik-b

Posted

@jomefavourite Thanks Jome 🙏, Even I subscribed to your channel, Your tutorials are also good man !💯

1

@jomefavourite

Posted

Thanks 😊@abhik-b

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Jome Favourite! 👋

Nice work on this challenge! 👍

This challenge is a little tricky to make responsive! I used CSS grid for this challenge and defined a bunch of things in the viewport units so that the grid would scale up/down with the size of the screen (which I can see you've done, too). Remember, you can always use the min-max function to your advantage to prevent certain rows or columns from becoming too large or too small at certain screen sizes. 😉 Overall, I think you've done a pretty good job ! 👏

I only suggest,

  • Turning the navigation links in the header of the page in the desktop layout into actual links using the anchor tag. 😉
  • Adding some alt attributes to the images to clear up your solution report.

Keep coding (and happy coding, too)! 😁

1

@jomefavourite

Posted

Thank you very much for your feedback, I'll make changes. I've never used min-max property before. I'll make research on that @ApplePieGiraffe

0

@jomefavourite

Posted

I've fixed all accessibility issues now 😊

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@jomefavourite

Great work! 👍 Keep it up!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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