Design comparison
Solution retrospective
Hello there 🙋♂️
It was a nice challenge! I did it mainly to practice css animation with React, since I was a bit inexperienced in it and couldn't tackle bigger projects 😔
In fact, it turned out to be harder than I thought at first. The thing that helped me the most was forwards
value in animation-fill-mode
property (it makes the element retain the computed values set by the last keyframe). A real life-saver 😅
Another thing I practiced was writing clean code (well, at least I tried), not using extra properties or variables. Plus, I used sass @mixin
for the first time.
So, the overall experience was pretty gratifying!
P.S. Could someone tell me if you can use the word "animation" in plural in this context (see the first paragraph)? English is not my first language, and I'm a bit confused. 🙄
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hello, Bonrey! 👋
Nice job on yet another challenge! 👏 The "Thank you!" animation looks great and is a cool addition to this solution, I think! 😀
Like B1N4R1 mentioned, "animations" is definitely valid English! 😄
Keep on going with these challenges! Happy coding! 😁
1@BonreyPosted over 3 years ago@ApplePieGiraffe thanks a lot! As I said, this challenge was a warm-up before a bigger project 😉
P.S. Phew, from now on, I'll use "animations" without doubt 😄
1 - @B1N4R1Posted over 3 years ago
Hi Bonrey,
Great solution to the challenge, I liked how you animated the card and how the "thank you" appears when you click the button and you did it all with React, That's great!
I like the way you used Flexbox's flex-basis property to make the layout of the card, I thought of doing this challenge using CSS Grid but Flexbox is a good way to go to.
Regarding your english doubt, you can use "animations" with no problem to refer to more than one animation
Keep on like this!
Cheers!
1@BonreyPosted over 3 years ago@B1N4R1 thank you! 😊 Yeah, flexbox comes in handy quite often. I can't think of any project where I didn't use it.
0
Please log in to post a comment
Log in with GitHubJoin 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