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

React.js + TypeScript + Firebase + SCSS Testimonials Grid Section

Better5afe 850

@better5afe

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Summary:

  • Upon entering the page, users will see a loading animation while the data is being fetched from Firebase. To make this feature more prominent, the fetching function is embedded inside a setTimeout() function which delays it - I would not do this in a professional app tho.
  • If the data fails to be loaded, the users will see a simple error message.
  • If the data is successfully loaded, the users will see different animations and layout depending on their device's screen size.
  • Desktop layout is based on CSS Grid.

Feel free to leave any feedback.

Thanks & Happy Coding! 🎃

Community feedback

@kabir-afk

Posted

Hey!!, nice page , altho I'd recommend that if you are already using these technologies then you should try leveling up in your animations as well . . . .I noticed that you were using @keyframes in your page for animations , not that they don't look appealing, they're great , but they don't provide you with much diversity . . . since you are already using react , don't you think that Framer is a better choice ? If you prefer not to use Framer Motion, you can also explore GSAP. It has a really similar syntax to @keyframes. I highly recommend giving it a try in your upcoming projects . . .hope you find it helpful . . . and as always , keep the grind 💪💪

Marked as helpful

0

Better5afe 850

@better5afe

Posted

@kabir-afk Hiya, thanks for the feedback! Framer Motion is a really cool library and I actually used it a couple of projects back, but with this one I just wanted to practice keyframes and especially on scroll animations, since there's was basically no other challenge 😜

0

@kabir-afk

Posted

@better5afe I see I see , well if that's the case then it's ok 😂,,altho you should really look up gsap . . .I worked with it in my todo-app and I found it to be a really friendly lib . . .

0
Better5afe 850

@better5afe

Posted

@kabir-afk I definitely will, that's for the recommendation! The to do app is on my list of challenges to complete, so maybe I'll use gsap there as well :D

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