The latest articles on DEV Community by Sumeet Giri (@sumeet_giri). https://dev.to/sumeet_giri https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3252317%2F37a25ac9-466f-42c5-961f-c97172f921c6.png https://dev.to/sumeet_giri en Sumeet Giri Sun, 08 Jun 2025 11:28:27 +0000 https://dev.to/sumeet_giri/my-first-open-source-contribution-10b5 https://dev.to/sumeet_giri/my-first-open-source-contribution-10b5 <h1> 🚀 My First Open Source Contribution – </h1> <p>Open source has always intrigued me—but I never imagined that contributing to a real project would be this exciting and rewarding.</p> <p>Recently, I contributed to an open-source project maintained by my scriptsprite private limited, and I want to share how I did it, what I learned, and why you should try it too—especially if you're learning frontend development.</p> <h2> 💼 About the Project </h2> <p>The project was a frontend web application built with modern web technologies like <strong>HTML</strong>, <strong>CSS</strong>, and <strong>JavaScript</strong>. It already had a solid base, but there were several areas that could be improved—especially for <strong>mobile responsiveness</strong>, <strong>form handling</strong>, and <strong>UI structure</strong>.</p> <h2> ✨ My Contributions </h2> <p>I worked on the <strong>frontend side</strong>, and here's what I contributed:</p> <ul> <li>✅ Improved mobile responsiveness (navbar, hero section, layout)</li> <li>✅ Refactored CSS for better readability and maintainability</li> <li>✅ Added error handling and better messages for form validation</li> <li>✅ Lazy-loaded images to boost performance</li> <li>✅ Improved accessibility using proper contrast and ARIA labels</li> </ul> <p>These changes not only improved the user experience but also helped make the project more scalable and inclusive.</p> <h2> 🛠️ How I Contributed (Step-by-Step) </h2> <p>Even though I had direct access to the repository, I followed a <strong>professional workflow</strong> just like any open-source contributor:</p> <h3> 1. 📦 Cloned the Project </h3> <p>I used GitHub Desktop to clone the repo and set it up locally:</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> bash git clone https://github.com/relative/project-name.git cd project-name npm install npm run dev 2. 🧑‍💻 Made My Changes Using VS Code and Chrome DevTools, I fixed layout bugs, made the site mobile-friendly, and added accessibility improvements. 3. 💬 Committed and Pushed Changes I made meaningful commits and pushed them: git add . git commit -m "Improved mobile navbar and added ARIA labels" git push origin responsive 📚 What I Learned Real-world workflow using Git branches, commits, and pull requests Importance of writing clean, maintainable code How small UI tweaks can have a huge impact That open-source welcomes beginners—everyone can help! --- 🙋 Why You Should Contribute Too Contributing to open-source projects helps you: 💼 Build real-world skills 💻 Improve your Git and collaboration workflow 🛠 Showcase work on your GitHub profile 📈 Grow as a developer by working with real codebases 💬 Join a community and get feedback on your code Start small—fix a typo, improve layout, or write better error messages. Every contribution matters. --- 📌 Final Thoughts I’ve pinned the project I contributed to on my GitHub profile. It’s a great feeling to know I improved something real—and I encourage you to try it too. If you’re new to open source, don’t let it intimidate you. Pick a project, clone it, and get involved. Your code could make someone’s project better—and you’ll grow in the process. --- 🔗 Connect With Me Want to chat about frontend or open source? GitHub: github.com/Sumeet-Giri LinkedIn: linkedin.com/in/sumeet-giri </code></pre> </div> webdev programming opensource career