Del Ara• 200
@Mittensdlara
Submitted
The Bipu
@the-bipu
All comments
- The Bipu• 410
@the-bipu
Posted
Try working on the CSS part. Since you're using Tailwind, you have more control over the styles. Use Figma for precise measurements. Since this is an older project, you'll likely feel more confident recreating it.
0 - Rishika• 10
@Rishikagoyal
Submitted
The Bipu• 410@the-bipu
Posted
Hey buddy 👋
Congratulations for completing your first project here.
The code is well structured, readable and reusable and the layout is also good. The only thing you should keep in mind is to paste the readme-template files content in the readme file and then make changes in the file as per requirements.
This is a good practice as a beginner and by doing this you can track your progress as a good frontend developer.
Keep Coding 🚀
Marked as helpful
0 - Sahil Kumar• 190
@Vi-r-us
Submitted
I created an NFT preview card component, featuring a modern UI design that is responsive across various screen sizes. This project was developed as part of the Frontend Mentor challenge. To ensure responsiveness, I utilized a flex layout combined with media queries. Additionally, I enhanced the loading experience with webkit animations and implemented Lottie animations using JSON files.
During this project, I encountered several challenges, including handling different images for desktop and mobile views. To address this challenge, I implemented image selection with media queries. Additionally, I delved into the basics of webkit animations and their functionality, as well as learned how to incorporate JSON file animations using Lottie.
Desktop Design | Mobile Design :-------------------------:|:-------------------------: |
- Solution URL: GitHub Repository
- Live Site URL: Deployed on Github pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox, Grid Layouts
- Pseudo-elements, Transform
- KeyFrames Animations
- Lottie Animations (JSON)
- Mobile-first workflow
This project provided valuable experience in front-end development, particularly in achieving responsive design using flex layouts and media queries. It also expanded my knowledge of webkit animations and the implementation of JSON-based animations with Lottie.
In completing the challenges of this project, I found the following resources particularly helpful:
- Kevin Powell's Video on Animations - Kevin Powell's video provided valuable insights into the basics of animations and how to apply them effectively.
- Resource on Animation Basics - This resource helped me grasp the fundamentals of animations and apply them to this project.
- Playlist on Pseudo-elements - This playlist was instrumental in understanding and using pseudo-elements to enhance the project's UI.
- Implement LottieFiles Animations
The Bipu• 410@the-bipu
Posted
Hey Buddy !!
- Don't ever paste the readme content in the community feedback section. If you have any question then you can ask freely to the community.
- Font sizes are given in the style-guide.md file.
Other that these everything in the project is fine. Also the animations are truly impressive.
Happy Coding !!
1 - PMohammed Omar Helal• 360
@MohammedHelal
Submitted
The Bipu• 410@the-bipu
Posted
Use cssgradient.io website for creating gradients. It'll improve your design.
Design and functionality both are good. Keep Coding !! 🚀
1
