DEV Community

Cover image for My First Open Source Contribution
Sumeet Giri
Sumeet Giri

Posted on

My First Open Source Contribution

šŸš€ My First Open Source Contribution –

Open source has always intrigued me—but I never imagined that contributing to a real project would be this exciting and rewarding.

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.


šŸ’¼ About the Project

The project was a frontend web application built with modern web technologies like HTML, CSS, and JavaScript. It already had a solid base, but there were several areas that could be improved—especially for mobile responsiveness, form handling, and UI structure.


✨ My Contributions

I worked on the frontend side, and here's what I contributed:

  • āœ… Improved mobile responsiveness (navbar, hero section, layout)
  • āœ… Refactored CSS for better readability and maintainability
  • āœ… Added error handling and better messages for form validation
  • āœ… Lazy-loaded images to boost performance
  • āœ… Improved accessibility using proper contrast and ARIA labels

These changes not only improved the user experience but also helped make the project more scalable and inclusive.


šŸ› ļø How I Contributed (Step-by-Step)

Even though I had direct access to the repository, I followed a professional workflow just like any open-source contributor:

1. šŸ“¦ Cloned the Project

I used GitHub Desktop to clone the repo and set it up locally:


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

Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
nevodavid profile image
Nevo David •

pretty cool seeing that first real-world push, tbh it always feels a bit surreal - you reckon the thrill ever fades or does it just get better with every new thing you ship?

Collapse
 
meenakshi052003 profile image
Meenakshi Agarwal •

Nice work! Improvements like better responsiveness and accessibility add real value. Contributing through open source is definitely a rewarding way to learn and grow!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.