Skip to content
Submitted about 2 months ago

ROOM HOMEPAGE USING SCSS AND JS

1deadjoe•370
@1deadjoe
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

What are you most proud of, and what would you do differently next time?

I a proud that I was able to style the webpage without layout breaking. Although it took me quite a while. I have gotten a great grasp on transitions too.

What challenges did you encounter, and how did you overcome them?

The only challenge I have encountered was trying to add in a slide in animation for the three slides. I eventually resigned, but I am still learning.

What specific areas of your project would you like help with?

I hope someone could help me understand how to include the slide-in animation to my webpage. I would higly appreciate any thoughts. On the animation, and also how to go about understanding the JS involved.

Community feedback

  • Mateus Lima•360
    @mts-mlPosted about 2 months ago

    Hey @1deadjoe!

    I like how there are no "empty" spaces when switching between different screen sizes. Did you read an article or was it just practice?

    Also, I liked the arrow transition you made.

    At width: 950px, the design breaks, the title and image get messed up.

    As for the JS, I named all sections with the same class and used document.querySelectorAll('.menu__bg') to select them all. Since it returns an array, I used forEach() to loop through and select the correct one to display. I'm happy with how my JS turned out, and if you'd like to check it out, I believe it could help you.

    Marked as helpful
    0
    1deadjoe•370
    @1deadjoePosted about 2 months ago

    Thank you for your feedback @mts-ml . I have just realized that flaw. I will make sure to correct it and update my solution.

    Making sure there were no empty spaces was just a lot of practice and iterations. It took me a lot of repetitions to figure out how to make it fluid, even though it did not turn out perfectly.

    1

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