Frontend Mentor Projects 🚀

Frontend Mentor is an excellent platform for front-end developers who want to improve their skills and build real-world projects. It offers a range of challenges that cater to different skill levels and provides resources and support to help developers learn and grow their skills in HTML, CSS, and JavaScript.

Click here to checkout my Frontend Mentor Profile.

About the Journey

• My Frontend Mentor Profile: @beRajeevKumar
• My Github Repository: Frontend Mentor Projects
• What I learn after complete these projects: Read Blog

Listing of all the projects

S.No	Name of the Project	Live Project View	Source Code	Read Blog
1.	Community Card	Project Demo	Project Code	Read Blog
2.	E-Commerce Product Page	Project Demo	Project Code	Read Blog
3.	Testimonials Grid Section	Project Demo	Project Code	Read Blog
4.	News Homepage Website	Project Demo	Project Code	Read Blog
5.	Chat App CSS Illustration	Project Demo	Project Code	Read Blog
6.	Advice Generator App	Project Demo	Project Code	Read Blog
7.	Base Apparel Coming Soon	Project Demo	Project Code	Read Blog
8.	Article Preview Component	Project Demo	Project Code	Read Blog
9.	Huddle Landing Page	Project Demo	Project Code	Read Blog
10.	Stats Preview Card	Project Demo	Project Code	Read Blog
11.	Huddle Introductory Section	Project Demo	Project Code	Read Blog
12.	Order Summary Component	Project Demo	Project Code	Read Blog
13.	Three Column Cards	Project Demo	Project Code	Read Blog
14.	Clipboard Landing Page	Project Demo	Project Code	Read Blog
15.	Profile Card Component	Project Demo	Project Code	Read Blog
16.	Fylo Two Column Layout	Project Demo	Project Code	Read Blog
17.	Product Preview Card	Project Demo	Project Code	Read Blog
18.	Intractive Rating Card	Project Demo	Project Code	Read Blog
19.	NFT Preview Card	Project Demo	Project Code	Read Blog
20.	Social Proof Section	Project Demo	Project Code	Read Blog
21.	Single Price Grid Component	Project Demo	Project Code	Read Blog
22.	QR Code Component	Project Demo	Project Code	Read Blog

Tech stack

• HTML | CSS | SASS | TailwindCSS | Responsive Design
• JavaScript | DOM Manipulation | OOPs | ES6 | ES7
• React.Js | Redux | UseState | UseEffect | Framer Motion
• APIs | Libraries | npm |
• Git | GitHub | Markdown | VS Code | CodePen | Netlify | Vercel | Material UI | more...

Continuous Learning & Development

I am committed to an ongoing journey of improvement and expansion of my skills. To become a well-rounded full-stack developer, I will:

• Deepen my proficiency in HTML, CSS, and JavaScript by working on additional projects and challenges. This will solidify my foundation in core web technologies.

• Learn new frameworks and technologies to stay up-to-date and increase my versatility. This includes exploring JavaScript frameworks like React, Angular, and Vue to build interactive and dynamic web applications.

• Focus on backend development by learning technologies such as Node.js, Express.js, and MongoDB. This will enable me to build fully-functional, full-stack applications.

• Prioritize responsive design, accessibility, and SEO best practices to ensure the websites I build are high-quality, user-friendly, and optimized for search engines.

• Continually challenge myself to expand my knowledge and skills, pushing the boundaries of what I'm capable of as a developer. This commitment to lifelong learning will be a driving force in my professional growth.

By consistently investing in my development and exploring new technologies, I will position myself as a well-rounded, adaptable, and highly valuable full-stack developer.

Useful Resources & Courses

⚙️ How to get started with the code

1. Fork the repository
2. Clone it on ur local Machine: git clone https://github.com/Your_Github_username/Frontend_Mentor.git
3. Create New Branch: git branch -c "New Branch Name"
4. Navigate to the New Branch: git checkout"New Branch Name"
5. Make your changes and Commit them: git commit -m "Add Some feature"
6. Push the Branch: git push origin New Branch
7. Open Pull requestto main Repository and Submit.

• Courses

  • Course 01 - This is an amazing course which helped me finally understand HTML, CSS & Responsive Design.
  • Course 02 - This is an amazing course which helped me finally understand Advanced CSS, SCSS, Advance Grid, Flexbox & Advanced Responsive Design.
  • Course 03 - This is an amazing course which helped me Master JavaScript.
  • Course 04 - This is an amazing course which helped me Master ReactJs, NextJs, TailwindCSS.

• Resources

  • Resource 01 - This is an amazing articles which helped me finally understand HTML.
  • Resource 02 - This is an amazing articles which helped me finally understand CSS.
  • Resource 03 - This is an amazing articles which helped me finally understand JavaScript.

I would recommend everyone to check out the official resources for HTML, CSS, and JavaScript, as well as the Udemy courses that cover Web Development, JavaScript, React, and Node.js - these are all amazing and valuable learning materials to enhance your skills as a developer.

Author

• Website - Portfolio
• Frontend Mentor - @beRajeevKumar
• Twitter - @be_rajeevkumar
• LinkedIn @beRajeevKumar
• Hashnode - @beRajeevKumar

Acknowledgments

I would like to thank Frontend Mentor for providing such an amazing platform to practice my coding skills. I would also like to thank the community for providing feedback on my projects and helping me improve my coding skills. Additionally, I'm thankful to my go-to YouTube channels, official docs, Stack Overflow, Udemy courses, and especially the wonderful instructors whose guidance has been crucial throughout this journey.

License

This project is licensed under the MIT LICENSE.

Our Contributors

• We truly appreciate your incredible contributions to this project! Your dedication and hard work are vital to its continued growth and success. If you’ve found value in it, don’t forget to show your support by giving our repository a star! ⭐

---

Happy Coding 👨‍💻