Results Summary Component | ReactJs | CSS | Animations
Design comparison
Solution retrospective
I'm most proud of the CSS-only animation of this project. But, for next time, I would like to use a CSS framework and an animation library.
I'm also glad I discovered how to use the Context Hook to guarantee the correct heading levels and a reusable heading component through the React learn docs and an article from up your a11y.
What challenges did you encounter, and how did you overcome them?The sequence animation was the biggest challenge of this project. To overcome it, I used the CSS variables and the calc function on the animation-delay property to make the sequence work.
What specific areas of your project would you like help with?Any tip about how to better structure a React project? Besides that, I would appreciate any feedback.
Community feedback
- @jenna1kPosted 2 months ago
clean implementation and impressive animation!
Using index.js files in the components and assets folders has a few benefits:
- Cleaner imports: You can import components and assets directly from the folder name instead of specifying the index.js file. For example: import Button from '@components/Button'; instead of import Button from '@components/Button/Button';.
- Easier refactoring: If you need to rename a component or asset, you only need to update the index.js file instead of changing the import statements throughout your codebase.
- Consistent naming: Using index.js maintains a consistent naming convention across your project.
- Encapsulation: The index.js file can be used to export only the necessary components or assets from the folder, providing a layer of encapsulation.
Marked as helpful1 - @TedJenklerPosted 2 months ago
Nice animation really impressed, continue the great work
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