Room Homepage with CSS Transitions and JS (GSAP) Animations

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! 😁
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Dytoma
Your solution is amazing😍😍.
Can you please tell me How you managed to get this wonderful animations😅.
- @mattstuddert
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 yourpicture
elements, as theimg
at the bottom will act as the fallback if the other conditions aren't met or the browser doesn't support thepicture
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! 👍
- You don't actually need the second
- @brasspetals
Apologies, as I have nothing constructive to say. Yet another fantastic job that I am bookmarking for reference! 👏
- @jomefavourite
Wow, the animations are just amazing 🤩
- @posivibez
Awesome work. Love the intro animation, so cool! Referencing your work was very helpful for me. Thank you.
- @ezraguy
Hey @ApplePieGiraffe, your solution is absolutely beautiful, WOW. very professional! great job!
- @kvncnls
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.
- @artimys
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 👍
- @zuolizhu
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
intoheader
,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