Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 4 years ago

Room Homepage with CSS Transitions and JS (GSAP) Animations

ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Room homepage challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hey, everybody! 👋

I've given a lot of feedback on this particular challenge, and now it's my turn to give it a go! I hope I did okay! 😅

I ended up coding a lot more Sass and JS than I initially expected, but I learned a lot. I decided to put the slider images in my HTML so that I could use the <picture> element for responsive images but stored the text in my JS (feedback on my JS would be appreciated).

I added some cool transitions to the mobile menu and navigation and created an intro animation (using GSAP) after stumbling upon this YouTube video and remembering Connor Z did the exact same thing (and blew me away when I saw it) when he completed this challenge! 😆

More importantly, I tried to ensure that the design scales up and down nicely (which gave me quite a headache because of this behavior of flexbox), but I think I managed to do it okay in the end.

Of course, feedback is welcome and appreciated! 😊

Happy coding, everyone! 😁

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Dytoma•550
    @Dytoma
    Posted over 2 years ago

    Your solution is amazing😍😍.

    Can you please tell me How you managed to get this wonderful animations😅.

  • Matt Studdert•13,611
    @mattstuddert
    Posted over 4 years ago

    Hey APG, you've done a really great job on this challenge. Your solution is a good representation of the design, scales up/down very well, and the added extras with the animations and the transitions give it a beautifully polished feel 😍

    I've only got two small suggestions on things to tweak:

    • You don't actually need the second source inside your picture elements, as the img at the bottom will act as the fallback if the other conditions aren't met or the browser doesn't support the picture element.
    • You've done a great job of thinking about accessibility and how people might use the keyboard to navigate the page. One thing you could add is the aria-live="polite" attribute to the .hero__text-wrapper element to make sure the content changes are announced to screen reader users. Here's the MDN page for aria-live for more information.

    Keep up the amazing work! 👍

  • Anna Leigh•5,135
    @brasspetals
    Posted over 4 years ago

    Apologies, as I have nothing constructive to say. Yet another fantastic job that I am bookmarking for reference! 👏

  • Favourite Jome•1,110
    @jomefavourite
    Posted over 4 years ago

    Wow, the animations are just amazing 🤩

  • positivevibes•205
    @posivibez
    Posted over 4 years ago

    Awesome work. Love the intro animation, so cool! Referencing your work was very helpful for me. Thank you.

  • Guy Ezra•615
    @ezraguy
    Posted over 4 years ago

    Hey @ApplePieGiraffe, your solution is absolutely beautiful, WOW. very professional! great job!

  • Kevin Canlas•225
    @kvncnls
    Posted over 4 years ago

    Hey APG! Your site is awesome! Can I ask how you made the navbar close when you have it open on mobile/tablet size then expand to desktop size?

    So let's say your window was 500px width, you open the navbar menu, then you expand the window passed the navbar menu limit (where the hamburger menu should disappear). How did you get the navbar to close automatically? I don't think I saw an event listener on window resize.

  • Arturo Simon•1,805
    @artimys
    Posted over 4 years ago

    Hey there APG, I didn't realize you submitted a solution. Got to say it's pretty baller. High praise 🙌. Not sure if this is intentional on your part but when shrinking the browser width to 999px. The mobile nav appears prematurely and hides.

    Great job 👍

  • Connor Z•5,115
    @zuolizhu
    Posted over 4 years ago

    Coming from your comment on my solution 😏 I really love your design on the scales up and down, it just looks amazing 👏! One little detail you can try next time, when using tab navigating on those buttons, you can add

    :focus {
        outline: rgb(104, 190, 205) dotted 3px;
    }
    

    (This is how frontendmentor.io did on their buttons and input box 🤓)

    I think your skills of HTML CSS and JavaScript are solid enough, you could try some frameworks (I highly recommend Svelte since it's not that different from no-framework) to help you manage your code, e.g. for this project, you can split the index.html into header, carousel, about etc components, and makes it a lot much easier to maintain when you keep adding details latter on 😎.

    As always, keep coding 💪 and happy coding 🙌!!

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub