Design comparison
Solution retrospective
-------- All Frontend Mentor Challenges --------
Hello there! 👋
I'm a professional React developer working through the challenges from Frontend Mentor. 3 years ago doing the Guru projects landed me a job and I am coming back to finish all the challenges as a hobby. I'm methodically progressing through these challenges, starting with the free versions, and gradually working up to the premium ones.
-------- My Journey 🚀 --------
- Current Phase: Completing all Newbie Free projects.
- End of Current Phase: Code revision and optimization (E.g. Componentization/modularization)
- Next Steps: Moving onto Junior, Intermediate, Advanced, and finally the Guru levels.
- Premium Challenges: After completing the free versions, I'll tackle the premium challenges.
- End Phase: Code revision and optimization (E.g. Adding service workers, web workers, optimizing accessibility, refactoring projects to support PWAs)
-------- Repository Overview 📚 --------
The repository is a Lenra Monorepo. Each project in /packages is hosted on Vercel. The live versions you can find in the README.md
- Project Status: In Progress 🚧
- Number of Challenges Completed: 5
-------- Project Structure --------
Each project is housed in its own folder in the packages directory and contains all the necessary files. Feel free to explore.
-------- Stack That I will be using for the projects --------
- NextJS
- Zustand
- React Query
- Tailwind CSS
-------- Future Plans 🌟--------
- Code Optimization: Once all Newbie Free challenges are completed, I plan to revisit each project. I'll focus on optimizing the code, implementing Progressive Web Apps (PWA), enhancing accessibility, and general code clean-up.
- Timeframe: Due to my busy schedule, I'm aiming to complete these challenges ASAP. Your understanding and support are much appreciated!
-------- Connect with Me and Support My Journey! 🤝--------
- Star the Repo: If you find my work valuable or interesting, please give it a star! ⭐
- Follow Me on GitHub: Stay updated with my progress and latest projects by following me here.
Your support and feedback are crucial to my growth as a developer. Let's connect and embark on this coding journey together!
Thank you for stopping by! 🙏
Community feedback
- @piushbhandariPosted 11 months ago
-
for that wavy pattern, i would suggest that instead of having
background-repeat: no-repeat, change it tobackground-repeat: repeat-x;. this is because the pattern looks awkward when you scale your component to screen widths larger than 1440px -
the proceed to payment and cancel order need to be converted to more semantic elements i.e <button> or <a> because presumably, depending on the need of this on a web page, these are going to be doing something
-
for all interactive elements, make sure to have hover/focus states to indicate that these can be interacted with
-
i would suggest adding side paddings on your main/body element so that your component isn't hugging the edges.
-
add an alt attribute to your image
Marked as helpful1@lucky-lorePosted 11 months ago@piushbhandari Those are very valid points. Congratulations on noticing them and thank you for the feedback.
The solutions I post are not yet in complete form but any feedback is welcome 😊
0 -
- @MundiaNderiPosted 11 months ago
Happy to learn that the Guru projects landed you a job in the past. Really inspiring to newbies like me. I just started learning React and I hope to start practicing with Frontend Mentor.
Cheers!
1@lucky-lorePosted 11 months ago@MundiaNderi I'm happy you've found some inspiration in my journey! Wish you luck and all the best ❤️
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