Skip to content
Submitted about 3 years ago

Responsive Room Homepage using Sass, JS, and HTML5

Lance Martija•185
@lancemartija
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Room homepage
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

It's been a while since I've done some challenges here on Frontend Mentor. I have to admit, I'm getting kinda rusty with my JavaScript and CSS game. I'm really not that confident with my skills when it comes to JS, but I'm still getting the work done pretty nicely actually. In this project, I kinda didn't know how to create an image carousel, so I just tried to do it my way instead. I'm not proud of it, but hey, it works. Honestly though, I didn't know what I was doing and it's kind of embarrassing to share my code this way. Anyway, it would be awesome if you were to leave some insights on how I should've made the image carousel. I would highly appreciate any form of criticisms or helpful insights you'd like to share.

Thank you in advance. Keep on coding! ^^

Community feedback

  • Tanner Kopel•320
    @tankop1Posted about 3 years ago

    Here's a good example of an animated image slider made with just HTML and CSS, no JavaScript: https://codepen.io/Schepp/pen/WNbQByE

    The trick to building an easy animated image slider is to have a main container with overflow: hidden, an image container inside of that with display: flex, and then your images inside that. Make sure the main container is the same size as each image, and because the overflow is hidden, you should only see the first image. Then, attach an event listener that uses transform: translateX(-LENGTH_OF_IMAGEpx) to move the flex container to the left, therefore showing the next image.

    Good luck!

    Marked as helpful
    1
    Lance Martija•185
    @lancemartijaPosted about 3 years ago

    @tankop1 Definitely would try this one. Thanks for the insight!

    1
  • Lance Martija•185
    @lancemartijaPosted about 3 years ago

    By the way, it's still an ongoing project. The mobile layout is finished, but the break-point between mobile and desktop view still looks a little bit janky.

    0

Please log in to post a comment

Log in with GitHub

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